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?