Module not found - Importing svgs in NextJS

Question

I'm using the inline-react-svg plugin with babel in order to import inline SVG in NextJS.

That's my .babelrc file

{
  "presets": ["next/babel"],
  "plugins": [
    "inline-react-svg",
    [
      "import", {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

And also, I had to declare the modules related to image extensions because I'm using TypeScript.

That's the modules declared inside the @types folder in the root of the project

declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.svg'

But I'm not able to import any SVG file because TypeScript can't find the module.

Doesn't work with absolute imports but it works with the relative path "../../public/images/icons/go-back-arrow.svg"

check this https://medium.com/anna-coding/how-to-import-svg-in-next-js-with-typescript-88ebff26ce17 — Nowres Rafed, Jul 02 '20 at 13:11
That's was the tutorial which I followed but turns out the problem isn't related to NextJS. The babel plugin to import the SVG isn't compatible with the import resolver. — Laura Beatris, Jul 02 '20 at 13:15
Yes, try this plugin: https://github.com/tleunen/babel-plugin-module-resolver — Nowres Rafed, Jul 02 '20 at 13:17

score 1 · Accepted Answer · answered Jul 02 '20 at 13:16

This is a know compatibility issue between babel-plugin-module-resolver and babel-plugin-inline-react-svg

Refer to: Next.js typescript import aliases with babel-plugin-module-resolver

The PR to solve this problem isn't merged yet https://github.com/airbnb/babel-plugin-inline-react-svg/pull/17

score 0 · Answer 2 · answered Mar 20 '22 at 08:59

Another thing I just found is that the babel plugin does not work as good as the @svgr/webpack plugin for webpack. If you use it and the <svg />s do not load as expected consider taking a look at to Shifut Hossain's question here. I saved me a lot of time! :)

Module not found - Importing svgs in NextJS

2 Answers2