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

[vakhariaheet]

[ohansFavour]

I am also getting this error. I don't know why. @heet-vakharia have you found a solution yet?

[vakhariaheet]

no bro

[media-maven]

@ohansFavour @heet-vakharia
hey guys, did you found a solution?

[vakhariaheet]

Nope

…

On Tue, 12 Jan, 2021, 6:28 pm media-maven, ***@***.***> wrote: @ohansFavour <https://github.com/ohansFavour> @heet-vakharia <https://github.com/heet-vakharia> hey guys, did you found a solution? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMGALUKPQ6O3UJ6MWQL2PI3SZRBPRANCNFSM4UFI7H4A> .

[bensbits91]

Same issue

[LukeWood]

Same issue here

[coolbeatz71]

Any fix?

[bensbits91]

I'm using v2 for now. I have it working with these plugins: imagemin-mozjpeg, imagemin-optipng, imagemin-svgo, responsive-loader, sharp and webp-loader.

[t1gor]

Same for me - the lib does not work as expected at first install :( which is sad

[t1gor]

I'm using v2 for now. I have it working with these plugins: imagemin-mozjpeg, imagemin-optipng, imagemin-svgo, responsive-loader, sharp and webp-loader.

@bensbits91 could you please describe what's v2?

[bensbits91]

@t1gor I'm actually using next-optimized-images with a next.js project: https://github.com/cyrilwanner/next-optimized-images. Version 3 has similar issues, so I reverted to version 2, which is working well. I'm not sure if there's a version 2 of react-optimized-image

[t1gor]

Allright, thanks.

In case someone is still intrested, I managed to get it to work without the lib at all:

1. Added customize-cra
2. Add config-overrides.js

// config-overrides.js
const {override, addWebpackModuleRule} = require('customize-cra');

module.exports = override(
	addWebpackModuleRule({
		test: /\.(png|jpe?g|webp|tiff?)$/i,
		use: [
			'file-loader',
			{
				loader: 'webpack-image-resize-loader',
				options: {
					width: 1000,
				},
			},
		],
	}),
);

3. In components code, use it's params in way:

import SomeImageFile from 'Assets/Images/some-image-file.png?width=305&height=337&quality=85';

where width, height & quality are the params of the webpack loader. Check the docs for options: https://github.com/Calvin-LL/webpack-image-resize-loader#options

Hope that helps someone.

[EliteMasterEric]

@cyrilwanner I have been able to diagnose at least one case in which this bug occurs.

If the require call is performed in a higher component then passed down to another component where the Img component is, the srcRaw attribute is not built. The require call must be sent directly to the Img.

This can be problematic if you want to create a component which receives an image to render as an argument, and performs several other functions besides rendering the <Img>.

An example:

export const ImageWithCaption = ({image, caption}) => {
    return (<>
      <Img type="captioned" src={image} />
      <span style={{color: 'gray'}}>{caption}</span>
    </>);
};

export const App = () => {
    return (<div>
      <ImageWithCaption caption="This is a bird." image={require('./images/bird.png')} />
    </div>);
};

Here, the Babel plugin (which searches specifically for <Img> components and reinterprets their src properties) is unable to apply the special data to the Img and the previously cited error occurs.

It is useful to know that this is the cause of the problem, but the result is that the component is highly restrictive in the places it can be used and reused.

[mryechkin]

@mastereric thanks for those details - I was just trying to add the v3 for the first time to my app and got that error. I have that exact case, where a component receives the image src as a prop. Hopefully this can be fixed 🤞

[jrhager84]

Any status on this? This kinda defeats the purpose for a lot of its uses IMO. Thanks for all your hard work!