部署Next js应用程序时如何解决vercel“ModuleNotFoundError”

Question

每当我尝试将我的网站部署到 vercel 时，我都会收到此 ModuleNotFoundError。我已重命名我的组件和 CSS 模块，但由于某种原因，我一直收到此错误。

有谁知道如何解决这个问题，因为我不知道我做错了什么？

错误日志截图

Answer 1

您是否推送了仅重命名文件的提交？如果您使用不区分大小写的文件系统（通常是 macOS）并且远程使用区分大小写的文件系统（基于 Linux 的构建环境） - 这可能会导致问题。您可以通过将文件重命名为不同的名称来确认（这样大小写不会成为问题）。

要确认，在本地运行 next build && next start 是否有效？

Answer 2

问题出在“styles”文件夹上，由于某种原因，vercel 无法找到我的 css 文件的路径。我通过将所有 css 文件（global.css 除外）移动到我的“组件”文件夹（虽然不是最好的选择，但它有效）解决了这个问题。然后我用这个代码创建了一个“jsConfig.json”文件。 { “编译器选项”：{ "baseUrl": ".", “路径”：{ "@/components/": ["components/"] } } }

最后，这就是我开始导入 CSS 文件的方式 从“@/components/.module.css”导入样式；

Answer 3

如果您已将文件夹或文件的名称更改为小写或大写，例如：从 /Components 更改为 /components

问题应该是因为你的远程分支没有更新，并且在本地分支中名称已经正确，你的解决方案运行，但是vercel使用linux，区分大小写，所以发生了ModuleNotFoundError。

要解决这个问题，您可以将您的文件夹/文件保存在其他地方，然后将其从项目中删除并提交。提交后，您应该再次复制并粘贴保存在项目中另一个位置的文件/文件夹，并提交以正确结构推送到 romete 分支。您也可以使用命令 "git mv "oldfileOrFolder" "newFileOrFolder"，参见文档。