使用react-app-rewired部署React应用到Heroku后出现空白页问题

1. 验证本地构建产物有效性 #

• 执行npm run build生成生产环境包
• 用serve -s build启动本地静态服务，确认页面能正常渲染。如果本地也空白，问题出在构建配置而非Heroku部署环节。

2. 确认package.json脚本与依赖配置 #

• 确保scripts中的build命令为react-app-rewired build，替代原react-scripts build
• 检查react-app-rewired是否在dependencies中（而非仅devDependencies），Heroku生产环境不会安装dev依赖，缺失会导致构建失败
• 确认web3适配所需的辅助依赖已安装，比如crypto-browserify、stream-browserify等，需同时添加到dependencies或devDependencies

3. 检查config-overrides.js配置 #

• 项目根目录必须存在config-overrides.js，且webpack配置正确适配web3类库，示例配置如下：

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    "crypto": require.resolve("crypto-browserify"),
    "stream": require.resolve("stream-browserify"),
    "assert": require.resolve("assert"),
    "http": require.resolve("stream-http"),
    "https": require.resolve("https-browserify"),
    "os": require.resolve("os-browserify"),
    "url": require.resolve("url")
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]);
  return config;
};

4. 排查Heroku构建日志 #

• 登录Heroku控制台，进入应用详情页，点击More > View logs
• 重点查看构建阶段日志，排查是否存在：
  • config-overrides.js语法错误
  • 依赖缺失导致的构建中断
  • webpack编译报错

5. 验证server.js与Procfile配置 #

• Procfile内容必须为web: node server.js，确保Heroku启动正确的服务进程
• 检查server.js中静态文件服务配置，确保指向正确的构建目录（通常为build），示例配置：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

// SPA路由适配，所有请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

6. 浏览器端调试 #

• 部署后打开应用，按F12打开开发者工具：
  • Console标签：查看是否存在JS报错（如web3模块未找到、变量未定义等），这类错误会导致应用渲染中断
  • Network标签：检查index.html、bundle.js等核心资源的加载状态，若返回404，说明静态文件路径配置错误

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