Import inline SVG from Absolute path in Next.JS

Question

I’m having trouble setting up Next.Js to make imports on absolute camino.

I set up the tsconfig.json using the baseUrl as "src" and even works except in inline SVG files. I am using the 'inline-React-svg' which works if you care about relative path but completely ignores the absolute path I have set up. And regardless of whether the import is working or not the Eslint error. Below is the code:

First my structure was like this:

• src
  • Assets
  • pages
  • Styles

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "./src",
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
  ],
  "exclude": [
    "node_modules",
  ]
}

Babel.config.js

module.exports = {
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    "inline-react-svg"
  ]
}

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "prettier/standard",
    "prettier/react"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "space-before-function-paren": "off",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"

  }
}

Examples:

In the archive "./src/pages/_app.tsx" he matters the theme (Theme.ts) and the Globalstyles of Styled Components in an absolute way as expected:

src/pages/_app.tsx

import GlobalStyle from 'styles/global'
import theme from 'styles/theme'

Make sure he didn’t need to return the folders with '../', but in my index.tsx it imports the SVG only relatively.

src/pages/index.tsx

import Logo from '../assets/logo.svg' /* assim funciona */
import Logo from 'assets/logo.svg' /* assim não funciona */

One more problem! Whether Eslint is working or not, Eslint is filling the bag saying that the file does not exist or that the type has not been defined:

Cannot find module '.. /Assets/logo.svg' or its corresponding type declarations.ts(2307)

Well, I’m using the Next.JS 10.0.5 with the 'next-images'. I believe this adds typing to all image files, including SVG. Am I correct? What configuration do I have to do to make this error occurs and I can import the SVG inline?

Answer 1

Whether Eslint is working or not, Eslint keeps saying that the file does not exist or that the type has not been defined

I may be wrong, but from what I saw in the documentation, I believe next-images does not create image types. In this specific case, you can try to create the image types themselves .svg and see if it solves the problem.

Create a file called svg.d.ts at the root of the project and add the code:

declare module "*.svg" {
  const content: any;
  export default content;
}

and in your tsconfig.json add the type file svg.d.ts:

"include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "svg.d.ts"
  ],

Now about absolute import, you can use the alias for import. Valid for Next.js 9.4 and later.

In his tsconfig.json add (Already knowing that "baseUrl": "./src", and the assets inside this folder):

"paths": {
      "@/assets/*": ["assets/*"]
    }

It resolves any import that begins with @/assets to the folders assets inside src. When importing, write:

import Logo from '@/assets/logo.svg'

I’m not sure if it solves all the problems, but I think it’s worth testing :).