Import inline SVG from absolute path on Next.JS

Viewed 752

I am having difficulties in configuring Next.Js to make imports in absolute way.

I configured tsconfig.json using baseUrl as "src" and it even works, except for inline SVG files. I'm using the 'inline-react-svg' that works if you import relative path but completely ignores the absolute path that I configured. And regardless of whether the import is working or not, Eslint is giving an error. Here is the code:

First, my structure looks 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 file "./src/pages/_app.tsx" it imports the theme (theme.ts) and GlobalStyles of the Styled Components absolutely as expected:

src/pages/_app.tsx

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

Check that it didn't need to return the folders with '../', but in 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 */

Yet another! Whatever if it works or not, the Eslint pisses you with an error message saying that file don't exists or the types is not defined.

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

Well, I'm using Next.JS 10.0.5 with 'next-images'. I think it adds the typing to all image files, including SVG. Am I right? What configuration do I have to make for this error to occur and to be able to import the SVG inline absolutely?

0 Answers
Related