React应用部署至Heroku后无法运行问题排查

这个错误几乎可以确定是你的服务器在请求bundle.js时返回了HTML内容（大概率是404页面），而不是正确的JavaScript文件。结合Heroku的部署特性，我给你几个排查和解决的方向：

1. 确认package.json中的构建脚本和Heroku配置 #

• 首先确保你的package.json里有正确的build脚本，比如Create React App的默认配置：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

• 还要让Heroku在部署时自动执行构建命令，可以添加heroku-postbuild脚本：

  "scripts": {
    // ...其他原有脚本
    "heroku-postbuild": "npm run build"
  }
  

2. 检查静态文件的托管配置（如果用自定义服务器） #

如果你的项目用Express等自定义服务器，必须确保正确托管build文件夹的静态文件，同时处理SPA的路由问题（避免刷新页面返回404）：

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

// 托管build目录下的静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 所有请求都返回index.html，适配SPA路由
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}`);
});

注意：如果你的build文件夹在子目录（比如client/build），要对应调整path.join的参数。

3. 查看完整的Heroku构建日志 #

你提供的日志内容不完整，建议通过heroku logs --tail命令查看实时日志，或者在Heroku控制台的应用页面查看完整构建记录，重点确认：

• npm run build是否成功执行
• 构建后的文件是否正确生成在build目录下
• 是否有依赖安装失败、权限不足等异常提示

4. 检查Webpack的publicPath配置（如果自定义了Webpack） #

如果你手动配置了Webpack，要确保生产环境的output.publicPath设置为'/'，否则浏览器会请求错误路径的bundle.js：

module.exports = {
  // ...其他配置
  output: {
    publicPath: '/',
    filename: 'bundle.js'
  }
};

按照以上步骤逐一排查，应该能解决你的部署问题。

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