Laura Beatris
Laura Beatris

Reputation: 1922

Module not found - Importing svgs in NextJS

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.

enter image description here

enter image description here

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

Upvotes: 2

Views: 8020

Answers (2)

Yariv Shamash
Yariv Shamash

Reputation: 91

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! :)

Upvotes: 0

Laura Beatris
Laura Beatris

Reputation: 1922

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

Upvotes: 1

Related Questions