not working with babel-plugin-emotion

[ardaerzin]

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]

I am encountering the same issue.

[ardaerzin]

@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
`