React应用推送至Heroku时构建卡在70%报错失败如何解决

70%位置的报错只是构建脚本执行失败的最终结果，核心故障点来自40%位置的ModuleNotFoundError模块找不到报错，可按以下顺序排查：

1. 文件大小写不匹配排查 #

这是本地构建正常、Heroku构建失败的最高发诱因

• Heroku使用Linux容器运行构建流程，文件系统严格区分大小写；而Windows、macOS的默认文件系统不区分大小写，所以本地大小写不匹配的引用不会报错。
• 核对你代码中引用路径./navigation/navBar的大小写，和src/components/navigation/目录下实际的导航组件文件名是否完全一致，比如实际文件名为NavBar.js/Navbar.js/navbar.js的情况都会触发该报错，修改引用路径或文件名保证大小写完全匹配即可。
• 你提到的系统查找scss文件是webpack的正常兜底逻辑：配置了scss扩展名解析规则时，webpack找不到对应js文件会按扩展名顺序尝试查找其他类型文件，不是主动需要scss文件，不用针对这个点处理。

2. git文件追踪状态排查 #

• 检查项目根目录的.gitignore文件，是否存在误匹配导航组件文件、navigation目录的规则，导致对应文件没有被提交到git仓库，推送到Heroku的代码包里缺失对应的文件自然无法解析。
• 执行git ls-files src/components/navigation命令，查看输出列表中是否存在你的导航组件文件，无输出则说明文件未被git追踪，提交对应文件后重新部署即可。

3. webpack生产配置排查 #

• 打开你项目中webpack/prod.config.js文件，检查resolve.extensions配置项，是否包含你导航组件使用的文件扩展名，比如你的组件是.jsx/.tsx后缀，但配置项中只写了.js/.scss，就会导致无法识别对应后缀的文件，补全扩展名即可。

4. 清理构建缓存重试 #

如果以上排查都正常，执行命令清理Heroku的构建缓存后重新推送：
heroku builds:cache:purge -a 你的Heroku应用名称
避免旧的缓存文件干扰构建流程。

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