Error: Cannot find module 'file-loader'

[RenatoCesarF]

Hi, I'm trying to use this package in a Next.JS enviroment with typescript and I'm getting this error:

Error: Cannot find module 'file-loader'

My page is

export default function test() {
    return (
        <div>
            <LazyLoadingImage src="../../public/star-1.png" alt="star" width="50px" height="50px" className=""/>
        </div>
      )
}

and my component is:

interface LazyImageProps{
    src: string,
    alt?: string,
    width?: string,
    height?: string,
    className?: string,
}

function LazyLoadingImage({src, alt, className, width, height}: LazyImageProps){
    const [imageLoaded, setImageLoaded] = useState(false);

    // src image and trace image url
    // const { source, trace } = require(`./${src}`);
    const { source, trace } = require(`../../public/star-1.png`);
    return (
        <div className="imageLoader">
            <img 
                src={`./renato.png`} alt={alt} 
                loading="lazy" className={"real-img " + className} 
                width={width} height={height}
                style={{
                    opacity: imageLoaded ? "1" : "0",
                }}
                onLoad={() => setImageLoaded(true)}
            />
            
            <img
                style={{
                    opacity: imageLoaded ? "0" : "1",
                }}
                src={`./renato.png`}
                alt={alt}
            />
        </div>
    )
    
};

I decided to use this image ../../public/star-1.png for testing.

Here is my next.config:

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa");

const tracedImages = {
  test: /\.(png|jpe?g|gif|jp2|webp)$/,
  use: [
    {
      loader: 'image-trace-loader'
    },
    
  ]
};


module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    disable: process.env.NODE_ENV === 'development',
    skipWaiting: true,
  },
  reactStrictMode: true,
  images: {
    domains: ['codingideas.vercel.app'],
  },
  webpack: (config, options) => {
    config.module.rules.push(tracedImages)
    return config
  }

});

Anyone know what should I do to fix it?

[chmielulu]

Just add file-loader to your dependencies.