Cannot find module when import svg

ka8725 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

michielmetcake commented 3 years ago

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

cyrilwanner / next-optimized-images

Cannot find module when import svg #217