部署后Heroku出现空白页面问题：React + Ruby on Rails项目

看起来你遇到的问题很典型——仅新增一个依赖后生产环境渲染失败，但本地/回滚版本正常，结合两种错误表现（noscript提示+Redux的apply TypeError），大概率是依赖冲突、构建缓存或者生产打包时的隐藏问题，下面是一步步的排查和解决思路：

1. 排查Redux相关的依赖冲突 #

你的控制台错误指向Redux的apply方法调用失败，结合只新增了react-contenteditable@3.3.5，有可能这个依赖间接引入了不同版本的Redux，导致store初始化时出现兼容性问题：

• 本地运行npm ls redux（或yarn list redux），查看输出里是否有多个Redux版本共存（比如主项目用v4.x，而react-contenteditable依赖了v3.x）
• 如果发现多版本冲突，可以在package.json里添加对应字段强制统一Redux版本：

  // npm >=8.3 用户
  "overrides": {
    "redux": "^4.2.1" // 替换成你项目原本使用的Redux版本
  }
  // yarn 用户
  "resolutions": {
    "redux": "^4.2.1"
  }
  

• 重新安装依赖后，本地构建测试，再推送到Heroku。

2. 清理Heroku的构建缓存 #

Heroku的免费dyno经常会缓存旧的node_modules或构建产物，即使你推了新代码，缓存的旧文件可能导致生产打包异常：

• 运行命令清理缓存：

  heroku builds:cache:purge -a alutiiq-lang-test
  

• 然后重新推送代码触发构建：git push heroku main（或你的目标分支名）

3. 本地模拟生产构建环境 #

排除Heroku环境的干扰，在本地复现生产打包后的情况：

• 运行生产构建命令：npm run build（或yarn build）
• 用静态服务器启动构建后的产物：比如安装serve后运行serve -s build，访问本地地址看看是否出现同样的空白页或控制台错误
• 如果本地也能复现，就可以直接在本地调试：打开Chrome DevTools的Sources面板，通过source map定位到store.js第14行的代码，看看是不是调用applyMiddleware时传入了undefined的中间件，或者使用了已废弃的Redux API

4. 检查store.js的代码变更 #

虽然你说只新增了依赖，但有时候安装依赖时可能不小心修改了配置文件（比如IDE自动格式化、依赖安装脚本的副作用）：

• 对比回滚版本和当前版本的store.js文件（用git diff <回滚commit> HEAD -- src/store.js），重点看第14行附近的代码：是不是中间件数组里有undefined项？或者createStore的调用方式有问题？
• 比如，如果你的代码是这样的：

  const store = createStore(
    rootReducer,
    applyMiddleware(middleware1, middleware2, undefined) // 这里的undefined会导致apply方法报错
  )
  

  这种情况就会触发你看到的TypeError。

5. 检查React生产构建的日志 #

有时候本地构建时会有警告，但Heroku的构建日志可能没显示完整，你可以在本地运行npm run build时仔细看输出，有没有未处理的警告（比如依赖缺失、废弃API使用），这些警告在生产环境可能会变成致命错误。

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