Heroku部署React应用报错无法解析'web-vitals'模块如何解决

Module not found: Error: Can't resolve 'web-vitals' in '/app/src'

React应用在本地计算机运行完全正常，部署到Heroku平台后即触发上述错误，应用持续崩溃，始终提示相同错误无法正常运行。

• 执行npm install web-vitals --save-dev命令安装对应依赖
• 删除node_modules目录后重新执行npm install安装全量依赖
• 将web-vitals依赖版本从2.1.4降级至2.1.2
• 执行npm update更新项目依赖

核心原因是依赖分类配置错误：你用--save-dev参数把web-vitals安装到了开发依赖devDependencies列表中。Heroku默认执行生产环境构建，会自动跳过所有开发依赖的安装；本地运行时处于开发环境，会加载全量依赖，因此不会触发报错。
另外web-vitals是React应用运行时采集性能指标的依赖，本身就属于运行时必需的生产依赖，放在开发依赖分类本身就不符合依赖划分规则。

1. 执行以下命令，将web-vitals重新安装到生产依赖dependencies列表中：
   npm install web-vitals --save
2. 检查项目根目录的.gitignore配置，确认没有忽略package-lock.json锁文件，将更新后的package.json、package-lock.json提交到Git仓库。
3. 重新推送代码到Heroku触发构建即可。

如果项目有特殊配置要求Heroku安装全部开发依赖，可以执行以下命令修改Heroku环境变量（非特殊场景不优先使用该方案）：
heroku config:set NPM_CONFIG_PRODUCTION=false

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