Below are my CompileOptions:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": false,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
// "jsxImportSource": "@emotion/react",
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["*"],
"@/assets/*": ["assets/*"],
"@/config/*": ["config/*"],
"@/pages": ["pages/"],
"@/public/*": ["public/*"],
"@src/": ["src/"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"src/**/*.ts",
"src/**/*.tsx",
],
"references": [
{
"path": "./tsconfig.node.json"
}
],
"exclude": ["node_modules"]
}
In the project structure, all listed paths are in the root directory. Despite this, I encounter the following error:
Cannot find module '@/src/containers/dashboard' or its corresponding type declarations.
https://i.stack.imgur.com/sWoho.png
After adding webpack config in next.config.js:
webpack(config) {
config.resolve.alias = {
...config.resolve.alias,
'@': path.resolve(__dirname),
'@/src/*': path.resolve(__dirname, 'src/*'),
};
The compilation is successful but errors still persist in VS code.