React应用部署Heroku构建成功后页面空白 控制台报错如何解决？

你遇到的所有报错本质原因是：浏览器请求CSS、JS、manifest.json等静态资源时，服务器没有返回对应类型的文件，反而返回了React应用的index.html文件。浏览器尝试用CSS/JS解析器解析HTML开头的<字符，就抛出了对应的语法错误，样式和脚本无法加载自然显示空白页。

1. 检查根目录package.json的Heroku构建脚本 #

大部分该类问题都是部署时未正确构建前端产物导致的，在根目录的package.json的scripts字段中添加如下配置：

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"

该配置会让Heroku在部署时自动安装前端依赖并构建生产版本的React产物，生成对应的frontend/build文件夹。

2. 确认前端文件夹名称匹配 #

你server.js中配置的静态资源路径是/frontend/build，需要确认你的项目根目录下的前端文件夹确实命名为frontend，如果命名为client等其他名称，需要同步修改server.js中的路径配置。

3. 验证部署产物是否生成 #

如果上述配置都正确，可执行heroku run bash登录到Heroku应用的运行环境，进入frontend/build目录，检查是否存在static文件夹以及对应的CSS、JS、manifest.json文件。如果文件不存在，说明构建流程执行失败，可以查看Heroku的构建日志排查具体构建报错。

4. 确认NODE_ENV环境变量配置 #

执行heroku config检查是否手动修改了NODE_ENV变量，Heroku默认会将该变量设置为production，如果被修改为其他值，会导致server.js中的生产环境分支未执行，无法正确托管静态资源。

5. 检查前端homepage配置 #

查看frontend/package.json中是否配置了homepage字段，如果该字段值为错误的路径，会导致构建生成的静态资源引用路径错误，可将该字段删除，或者设置为你站点的实际域名。

修改完成后重新推送代码到Heroku触发部署即可解决问题。

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