我在 JSX 基础上创建了我的项目。我创建了一个 TSX 文件,Next js 自动创建 tsconfig.json 但出现错误:
./app/layout.jsx:2:0 Module not found: Can't resolve '@components/navegador/Nav' 1 | import './globals.scss'; > 2 | import Nav from '@components/navegador/Nav'; 3 | import Foot from '@components/footer/Foot'; 4 | 5 | export const metadata = { https://nextjs.org/docs/messages/module-not-found
这些组件位于 JSX 中。
我尝试删除 tsconfig.json 并且错误没有发生,但显然我的 tsx 文件显示错误。
tsconfig.json:
{
"compilerOptions": {
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
]
},
"include": [
"next-env.d.ts",
".next/types/**/*.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
您的别名(@)似乎只是在您的Javascript文件上工作,因为您在tsconfig.json文件中缺少一段代码。
您只需添加
"paths": {
"@/*": ["./*"]
}
tsconfig.json:
{
"compilerOptions": {
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"paths": {
"@/*": ["./*"]
},
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"plugins": [
{
"name": "next"
}
]
},
"include": [
"next-env.d.ts",
".next/types/**/*.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}