ReactJS应用Netlify部署正常但Heroku部署报错如何解决

问题场景 #

首次在Heroku部署ReactJS应用时，构建流程显示成功，但访问时出现应用错误：

执行heroku logs --tail尝试查看日志时，返回如下报错：

»   Warning: heroku update available from 7.59.0 to 7.60.1.
 Error: Cannot find module './_baseToString'
 Require stack:
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/lodash/toString.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/lodash/capitalize.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@heroku-cli/plugin-run/node_modules/cli-ux/lib/styled/table.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@heroku-cli/plugin-run/node_modules/cli-ux/lib/index.js       
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@heroku-cli/plugin-run/lib/lib/log-displayer.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@heroku-cli/plugin-run/lib/commands/logs.js
 -C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@oclif/config/lib/plugin.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@oclif/config/lib/config.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@oclif/config/lib/index.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@oclif/command/lib/command.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/@oclif/command/lib/index.js
 - C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/bin/run
at Object.<anonymous>      (C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku/node_modules/lodash/toString.js:1:20)

同应用在Netlify平台可正常运行。

问题根因 #

你现在看到的模块缺失报错和React应用本身代码无关，是本地安装的Heroku CLI客户端损坏导致的——CLI依赖的lodash文件缺失，导致你根本没法拉取Heroku服务器上的真实应用运行日志，自然无法定位应用访问报错的原因。应用在Netlify可正常运行，说明代码本身没有致命问题，故障点集中在本地CLI工具、Heroku平台部署配置两个层面。

解决步骤 #

1. 修复本地损坏的Heroku CLI #

先清理重装本地CLI，才能正常获取应用运行日志：

• 打开Windows控制面板「程序和功能」，找到Heroku客户端执行卸载
• 手动删除残留目录：C:/Users/WailInfo/AppData/Roaming/npm/node_modules/heroku，避免损坏的依赖文件残留影响新版本运行
• 重新安装最新稳定版Heroku CLI，安装完成后重启终端，执行heroku --version验证，只要不再出现Cannot find module类报错，就说明CLI修复完成

2. 排查Heroku部署配置问题 #

CLI修复后，执行heroku logs --tail保持日志监听状态，再刷新部署的应用页面，就能看到真实的运行时报错。针对React应用在Heroku部署的高频坑，可提前做以下检查：

• 检查package.json配置：确认存在正确的build脚本（CRA创建的项目默认配置为"build": "react-scripts build"），同时react、react-scripts等构建、运行必需的依赖放在dependencies字段下，不要仅放在devDependencies中——Heroku生产环境默认不会安装devDependencies下的包，缺包会直接导致启动失败
• 确认buildpack配置正确：如果是CRA创建的纯前端React项目，使用官方Node.js buildpack即可；如果需要支持前端路由刷新不返回404，可搭配对应静态资源配置，不要混用多个存在冲突的buildpack
• 检查启动配置：如果是纯静态React项目，确认配置了正确的静态文件服务（比如用serve包托管build目录，启动命令参考serve -s build），端口必须使用Heroku自动分配的process.env.PORT，禁止写死固定端口；如果是React+后端的全栈项目，确认后端启动命令配置正确，端口同样要读取环境变量中的PORT值

注意：Heroku构建流程成功仅代表依赖安装、build脚本执行阶段没有报错，不代表后续应用启动阶段正常。启动阶段的报错只会出现在运行日志中，必须等CLI修复后才能看到具体错误点做针对性调整。

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