Next.js 13.5.4使用路由组多根布局时出现路径编译错误

针对你遇到的Next.js路由组下仅app/(main)/page.tsx编译报错的问题，结合错误信息指向文件系统路径处理异常，建议从以下几个方向排查：

1. 检查引入组件的内部路径处理 #

你在page.tsx中引入了Hero、Footer、NavBar组件，错误大概率出在其中某一个组件的代码里：

• 查看这些组件是否使用了Node.js的fs模块或path模块，比如调用path.join()时传入了无效的.作为路径参数；
• 检查组件中静态资源（图片、字体等）的引用路径，有没有写成././xxx或者错误使用.作为根路径的情况；
• 排查组件内是否有动态导入或文件读取逻辑，路径拼接时出现了格式错误。

2. 验证路径别名配置 #

检查tsconfig.json或jsconfig.json中的路径别名配置，确保@的映射是正确的：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

如果别名映射错误，可能导致组件解析时路径异常，尤其是只有首页触发这个问题的情况下，可能是组件层级的路径解析差异。

3. 排查依赖兼容性 #

升级到Next.js 14后问题仍存在，可能是某个依赖包与Next.js版本不兼容：

• 执行npm ls或yarn list查看依赖树，排查是否有重复的path、fs-extra等文件系统相关依赖；
• 尝试临时移除非必要的依赖包，逐个恢复来定位是否是依赖冲突导致的路径处理异常。

4. 检查Next.js配置文件 #

查看next.config.js中是否有自定义的webpack配置或插件，比如修改了resolve规则，导致路径解析逻辑出错：

• 暂时注释掉自定义的webpack配置，重启开发服务器测试是否恢复正常；
• 确保配置中没有对根路径.进行错误的重写或映射。

如果以上方法都没解决，可以尝试创建一个最小化的测试项目：只保留(main)路由组和对应的基础组件，逐步添加原有代码来定位具体的错误触发点。

内容的提问来源于stack exchange，提问作者IllegalPrune295