Cannot find module when import svg

[ka8725]

My application folders structure is the following:

-src
-public
--images

Svg icons live in public/images folder as per next.js convention.

Webpack config is the following:

module.exports = withFonts(
  withOptimizedImages(
    {
      webpack: (config) => {
        config.resolve.alias['@public'] = path.resolve(__dirname, 'public');
        return config;
      },
    }
  )
);

(imagemin-svgo and svg-sprite-loader are installed).

When I require svg in my src/*.tsx files it works in dev mode, but when I build (run next build) it fails with the following error:

./src/components/Header.tsx:17:16
Type error: Cannot find module 'public/images/ok.svg?sprite'.
> 17 | import Ok from "@public/images/ok.svg?sprite"

What am I doing wrong?

[zhangchinhan]

I also get this error. When I require svg in my src/*.tsx files it works in dev mode, but when I build (run next build) it fails with the following error:

Cannot find module '../../../public/plus.svg?sprite'.

[JbPons]

Did you do specific configuration to use the library on typescript ? It's not work for me even in dev mode

[michielmetcake]

this should help you out: https://github.com/cyrilwanner/next-optimized-images/issues/103#issuecomment-554326426