React项目部署Heroku报错：无法解析'web-vitals'模块

问题根源 #

你将web-vitals放在了package.json的devDependencies（开发依赖）分类下，Heroku 生产环境构建流程结束后会默认删除所有开发依赖包；同时你配置的启动命令是React开发服务器react-scripts start，启动时会触发二次编译，此时web-vitals已经被删除，就会抛出模块找不到的报错。
本地运行时是开发环境，不会删除开发依赖，所以运行正常。

解决步骤 #

• 修正依赖位置（二选一即可）
  1. 如果你需要用到web性能上报功能：执行命令 npm i web-vitals --save 将web-vitals安装到生产依赖dependencies分类下，避免被Heroku清理
  2. 如果你不需要web性能上报功能：直接删除src/reportWebVitals.js文件，同时删除src/index.js中引入、调用该文件的相关代码即可
• 修正生产启动脚本（推荐）
  你当前的start命令用的是React开发服务器，生产环境使用性能差、有安全风险，还会触发不必要的编译。可以修改为直接运行构建好的静态产物：
  1. 执行命令 npm i serve --save 安装静态服务工具到生产依赖
  2. 将package.json中scripts下的start字段值修改为 serve -s build
• 清理Heroku缓存（可选）
  如果修改后重新部署还是报错，可能是Heroku缓存了旧的依赖包，执行命令 heroku builds:cache:purge -a 你的Heroku应用名称 清理缓存后重新部署即可

内容的提问来源于stack exchange，提问作者Thanh Hải