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, [email protected] 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 https://github.com/cyrilwanner/react-optimized-image/issues/19#issuecomment-758638816, 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!

[serban-mihai]

I also need this fixed, I need to dynamically render Img with sources get from MDX but no matter what I try I get this error

[coolbeatz71]

On my side, I was getting this error when I was conditionally calling the image src file as follow:

<Img src={isMini ? miniImg: bigImg} alt='logo' />

It starts working when I avoided this situation as follow:

{isMini ? <Img src={miniImg} alt='logo' /> : <Img src={bigImg} alt='logo' />}

I know It's repetitive, but It solved my problem.

[Dalimil]

It's frustrating and it needs to be fixed, but in the meantime, you could write this as a workaround:
If you were passing the ImgSrc data in some variable to your Img render function, such as

import LogoA from './images/logo.jpg';
const images = [LogoA, LogoB, ...];

// and rendering later:
<MyComponent src={images[0]} />

const MyComponent = (props) => <Img src={props.src} alt="xyz" className="abc" />

you will need to replace that with

import LogoA from './images/logo.jpg';
const images = [(p) => <Img src={LogoA} {...p} />, (p) => <Img src={LogoB} {...p} />, ...];

// and rendering later:
<MyComponent img={images[0]} />

const MyComponent = (props) => <props.img alt="xyz" className="abc" />

but I agree we need that babel plugin fixed :-D

[Mihai-github]

Hi, I am also getting the above error has anyone figured out a clear solution for this?

[scorn-da]

Hi, I have the same problem. Is there any fixes for that?

[anthonyjacquelin]

Same problem here and still no solution

[moasko]

Hi, me too have the same problem. Is there any fixes for that?

[think-divergent]

If you created your react app via create-react-app, you might have to rewire it to override the default bablerc https://www.npmjs.com/package/react-app-rewired

[ronjb04]

same problem here.. how i wish there is noted as a known issue.. i could have save me time in the setup and then just facing this issue

[Shubhamrawat5]

Same Error

[RuwaidMuntajim]

Hey people! Found the solution. https://youtu.be/3dzLIy8SPJg I've fully followed the instructions from here and it now works just fine the problem was the app wasn't reading the .babelrc file and that's the reason it had been showing the error "plugin not installed".