Named export 'LazyLoadImage' not found. The requested module 'react-lazy-load-image-component' is a CommonJS module, which may not support all module.exports as named expo rts.

[aliiadev]

import { LazyLoadImage } from 'react-lazy-load-image-component';
^^^^^^^^^^^^^
SyntaxError: Named export 'LazyLoadImage' not found. The requested module 'react-lazy-load-image-component' is a CommonJS module, which may not support all module.exports as named expo
rts.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-lazy-load-image-component';
const { LazyLoadImage } = pkg;

[yeasinsiam]

import pkg from 'react-lazy-load-image-component';
const { LazyLoadImage } = pkg;

This will temporary solve this problem

[aliiadev]

not correct, i tried many times, probably the problem is in production at astro, i used another library to fix it

[yeasinsiam]

i am using react remix and it seems like working fine.

[Niocas]

import pkg from 'react-lazy-load-image-component'; const { LazyLoadImage } = pkg;

This will temporary solve this problem

Does not work for me, images do not load anymore

[Niocas]

import pkg from 'react-lazy-load-image-component'; const { LazyLoadImage } = pkg;

This will temporary solve this problem

Okay, it works for prerendering but if I run "npm run dev", it does show any images anymore, only works with prerendering for me

[Weibozzz]

如何解决？

[aliiadev]

如何解决？

Please use another library

[monolithed]

Please use another library

Did find the one?

[sisyphusla]

The same error occurred when I deployed to Vercel

[radandevist]

with vite remix plugin:

• does no work:

import pkg from 'react-lazy-load-image-component';
const { LazyLoadImage } = pkg

• works:

import * as pkg from 'react-lazy-load-image-component';
const { LazyLoadImage } = pkg

🤷‍♂️

[thefathdev]

Is it working now? I am using react for astro and it show the same error message

[aliiadev]

Is it working now? I am using react for astro and it show the same error message

used another library to fix it

[aliiadev]

Is it working now? I am using react for astro and it show the same error message

U can use react-lazy-load
`
import React, {useCallback, useEffect, useState} from 'react';
import LazyLoad from 'react-lazy-load';
import type {ImgHTMLAttributes, ReactNode} from "react";
import loadingImage from '../../assets/loading-266.svg'

interface ZuImageProps extends ImgHTMLAttributes {
placeholderZuLazy?: ReactNode;
fallback?: string;
}

const ZuImage = ({placeholderZuLazy, alt, width, height, fallback = '/assets/images/loading-266.svg', src, ...props}: ZuImageProps) => {

const [imgSrc, setImgSrc] = useState<string | undefined>(fallback || src)
const onError = () => setImgSrc(fallback)

const onLoad = useCallback(() => {
    setImgSrc(src);
}, [src]);

useEffect(() => {
    const img = new Image();
    img.src = src as string;
    img.addEventListener("load", onLoad);
    return () => {
        img.removeEventListener("load", onLoad);
    };
}, [src, onLoad]);

return (
    <LazyLoad className={'flex items-center justify-center'} width={width} height={height}>
    {/*// @ts-ignore */}
    <img src={imgSrc ? imgSrc : "/assets/images/chodienlogo.jpg"}  onError={onError} style={{maxHeight: '100%', objectFit: 'contain'}} {...props} alt={alt} width={width} height={height}/>
</LazyLoad>

)
}
export default ZuImage
`

[alinasrabadi]

Vite has stricter handling for CommonJS modules, so you can fix this by using dynamic imports:

const [LazyLoadImage, setLazyLoadImage] = useState(null);

useEffect(() => {
  import('react-lazy-load-image-component').then((pkg) => {
    setLazyLoadImage(() => pkg.LazyLoadImage);
  });
}, []);

return LazyLoadImage ? <LazyLoadImage src="..." alt="Image" />