Next.js 13部署报错：Vercel/Heroku执行npm run build找不到Page.module.css

针对本地运行正常，但Vercel和Heroku执行npm run build时报Module not found: Can't resolve './Page.module.css'的问题，给你几个排查和解决方向：

1. 检查Git的大小写敏感性 #

本地Windows/macOS系统默认不区分文件名大小写，但Vercel/Heroku使用的Linux系统是严格区分的。如果之前修改过CSS文件的大小写（比如从page.module.css改成Page.module.css），Git可能没有同步这个变更，导致远程仓库里的文件名和本地不一致。

解决步骤：

• 先把本地的CSS文件重命名为临时名称（比如Page-temp.module.css），提交到Git：

  git add .
  git commit -m "temp rename css file"
  

• 再改回原来的Page.module.css，再次提交：

  git add .
  git commit -m "fix css filename case"
  

• 推送到远程仓库，重新触发构建。

2. 确认CSS文件已被Git追踪 #

检查项目根目录的.gitignore文件，确保没有把.css或者Page.module.css加入忽略规则。如果不小心忽略了，构建平台拉取代码时就会缺少这个文件。

可以用以下命令确认文件是否被Git追踪：

git ls-files | grep Page.module.css

如果没有输出，说明文件没被追踪，执行以下命令添加：

git add Page.module.css
git commit -m "add css module file"
git push

3. 验证构建平台的代码拉取状态 #

在Vercel/Heroku的构建日志里，查看拉取代码后的文件列表，确认app/Page.module.css是否存在。如果不存在，说明远程仓库确实没有这个文件，回到本地检查Git提交情况。

4. 检查Next.js版本兼容性 #

如果你的Next.js版本较旧，可能存在app目录下CSS模块解析的小bug。可以尝试升级到最新稳定版：

npm install next@latest react@latest react-dom@latest

提交package-lock.json后重新构建。

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