英文:
Nextjs 13: Can't resolve 'src/app/dashboard/layout.tsx' (deleted optional layout)
问题
我决定创建一个新的 Nextjs 13.4.5 项目,其中包含一个 app 目录。
我在我的 app 目录内创建了一个新的 dashboard 目录,然后在 dashboard 目录内创建了页面和布局组件。一切运行正常,有两个布局组件:一个位于 app 目录中的根布局,另一个是我在 dashboard 目录中创建的 layout.tsx。
最终,我决定删除 dashboard 目录中的 layout.tsx,因为我只想使用根布局,但出现了一个错误:
./
找不到模块: 无法解析 '/myproject/src/app/dashboard/layout.tsx'
https://nextjs.org/docs/messages/module-not-found
我在项目中搜索了任何导入语句或动态导入,以查找引用已删除的 dashboard/layout.tsx 的内容,但没有找到任何引用。
以下是我的 tsconfig 文件:
{
"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",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/": ["./src/"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
整个问题在于,如果您为新页面创建一个新的目录,而不在该目录内创建 layout.tsx,则一切正常运作。
但如果您在该路由目录内创建一个布局组件,然后将其删除,Nextjs 将无法呈现该路由而没有其布局组件,这有点奇怪。
是否有解决此问题的方法?因为我不想为我的路由创建一个无用的布局组件。
英文:
So I decided to create a new Nextjs 13.4.5 project with an app directory.
I created a new dashboard directory inside my app directory and then created page and layout component in the dashboard directory. It worked fine, there was two layout component: one was the root layout in the app directory, and the other one is the layout.tsx I created in the dashboard directory
Eventually I decided to delete the layout.tsx in the dashboard directory because I wanted to use only root layout, but an error occurred:
./
Module not found: Can't resolve '/myproject/src/app/dashboard/layout.tsx'
https://nextjs.org/docs/messages/module-not-found
I have searched in my project for any import statements or dynamic imports that reference the deleted dashboard/layout.tsx, but there is no reference
here is my tsconfig file:
{
"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",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
The whole problem is that when you create a new directory for a new page if you don't create layout.tsx inside that directory everything works fine.
but if you create a layout component inside that route directory and then delete it, Nextjs won't be able to render that route without its layout component and this is kinda weird.
Is there any way to solve this? because I don't wanna create an useless layout component for my route
答案1
得分: 15
我遇到了完全相同的问题,删除 .next 文件夹对我有用!感谢 @imjared 提供的答案!
英文:
I had the exact same issue and deleting the .next folder worked for me! Thanks @imjared for that answer!
答案2
得分: 3
Next.JS会将缓存保存在.next文件夹的.cache文件夹中。当你删除layout.tsx时,.next会认为layout.tsx仍然存在于应用程序目录中。
删除.next文件夹将解决此问题。
要立即生效,请重新启动您的应用程序。
英文:
Next.JS saves cache on .cache folder on .next folder. When you delete the layout.tsx, the .next thinks that the layout.tsx is still present on the app directory.
Deleting the .next folder will solve the issue.
To take effect immediately, restart your application.
答案3
得分: 0
这个问题非常让人困扰,因为当你推向生产环境时它仍然存在...
英文:
This issue is very annoying because it persists when you push to production...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论