使用Cloudflare Pages执行npm build时出现‘Cannot Find Module’错误

嘿，我之前遇到过几乎一模一样的情况！这个问题的核心原因其实很简单——Windows和Linux文件系统的大小写敏感性差异：

• 你的本地环境是Windows 11，它的文件系统是大小写不敏感的，所以哪怕你的实际文件名和导入语句的大小写有点出入（比如文件叫notfound.js但你写NotFound.js），本地构建依然能正常工作。
• 但Cloudflare Pages的构建环境是基于Linux的，Linux文件系统严格区分大小写，只要文件名和导入路径的大小写不完全匹配，就会抛出“找不到模块”的错误。

排查和解决步骤 #

1. 确认本地文件名和导入语句完全一致 #

先去你的src/pages目录下，仔细检查NotFound.js的实际文件名：

• 是不是写成了notfound.js（全小写）、notFound.js（驼峰小写开头）？
• 有没有可能后缀名是.jsx而不是.js？
  确保文件名和你导入语句里的pages/NotFound.js完全一致，包括大小写和后缀。

2. 修复Git仓库中的文件名大小写问题 #

如果本地文件名已经正确，但Cloudflare还是报错，大概率是Git没有同步文件名的大小写变化（Windows上修改文件名大小写，Git默认不会检测到）。你可以通过以下命令强制更新Git仓库的文件名：

# 先把文件临时改名，让Git识别到变化
git mv src/pages/NotFound.js src/pages/temp-not-found.js
# 再改回正确的大小写名称
git mv src/pages/temp-not-found.js src/pages/NotFound.js
# 提交并推送修改
git commit -m "Fix filename case mismatch for NotFound page"
git push

3. 重新触发Cloudflare Pages构建 #

推送修改后，去Cloudflare Pages的控制台，找到你的项目，手动触发一次重新构建，或者等待它自动拉取最新的代码进行构建。

其他可能的排查点 #

如果上面的步骤还没解决问题，可以检查这两个地方：

• 查看项目根目录的jsconfig.json（如果是React项目），确认baseUrl配置是否正确映射了pages目录到src/pages（不过你其他页面导入正常，这个概率很低）：

  {
    "compilerOptions": {
      "baseUrl": "src"
    }
  }
  

• 确认Cloudflare Pages的构建命令和你本地使用的一致，比如本地用npm run build，Cloudflare的构建命令也要设置成相同的。

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