英文:
JSX and TSX coexist in Next js project
问题
我创建了我的项目在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"
]
}
英文:
I created my project in JSX base. I created a TSX file and Next js create tsconfig.json automatically but an error occurs:
> ./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
Those components are in JSX.
I tried to delete tsconfig.json and the error doesn´t occur but obviously my tsx file show errors.
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"
]
}
答案1
得分: 0
更新您的tsconfig.json的路径配置应该解决使用'@components'别名的绝对路径时的模块解析问题。
{
"compilerOptions": {
//...您的其他配置设置
"baseUrl": ".",
"paths": {
"@components/*": ["components/*"]
}
}
}
英文:
updating paths configuration of your tsconfig.json should resolve the module resolution issue when using absolute paths with the '@components' alias.
{
"compilerOptions": {
//...rest of your config settings
"baseUrl": ".",
"paths": {
"@components/*": ["components/*"]
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论