stereobooster / react-ideal-image

🖼️ An Almost Ideal React Image Component
https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md
MIT License
3.26k stars 74 forks source link

Check the render method of `IdealImage`. #153

Open rotexhawk opened 4 years ago

rotexhawk commented 4 years ago

Relevant code or config

import React from 'react';
import { Container, ImageContainer } from '../Containers'
import IdealImage from 'react-ideal-image'
import image from './image.jpg';

const imgUrl = 'http://localhost:4000/public/images/raw/20190810_121340_HDR.jpg'

console.log('image', image)
const GridFive = () => {
    return  <Container>
                <ImageContainer>
                    <IdealImage placeholder={{color: 'black'}} srcSet={[{src: image, width: 500} ]} width={800} height={800} />
                </ImageContainer>
            </Container>;
}

export default GridFive;

I don't know what I am doing wrong. At first I thought that the package doesn't work with remote urls, but I imported the image and I still get the follow error. If I remove the ideal image and just use img src everything works.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `IdealImage`.
frednomoon commented 4 years ago

Yeah I'm getting this as well. Tried using the exact same props etc as in the example of the readme.

Update: took me about 5 seconds to fix this after reading other issues. Its caused by react-waypoint v9 so just need to specify v8 in your package json. I would suggest the maintainers start handling their Peer Dependencies correctly in response to this instead of requiring people to manually install them. Or at least add this correction to the docs.