search

cyrilwanner / react-optimized-image

Easy to use React components for optimized-images-loader / next-optimized-images.
MIT License
62 stars 8 forks source link

not working with babel-plugin-emotion #10

Open ardaerzin opened 4 years ago

ardaerzin commented 4 years ago

I decided to try out the canary branch of 'next-optimized-image' yesterday and came across this bug. Whenever I tried to use an styled(Img) component I keep getting this error:

Babel plugin 'react-optimized-image/plugin' not installed or this component could not be recognized by it.

I then looked at your tests and saw that @emotion/styled should work ok. took me some time to find out the problem, but it seems like when I have the babel-plugin-emotion enabled this issue happens.

also had the same error when I tried to wrap Img in a custom HOC

zmartell commented 4 years ago

I am encountering the same issue.

ardaerzin commented 4 years ago

@zmartell I was able to get this working by wrapping the image in another component AND not passing a src prop.

import Img from 'react-optimized-image'  

const MyImage = ({ imageName, ...rest }) => {  
  return (
    <Img
      src={require(`/images/${imageName}`)}
      {...rest}
    />
  )
}

export default styled(MyImage)`
  ...your styles
`