在Heroku部署代码遭遇依赖冲突错误，寻求解决办法

架构老林

2026-8-24

解决Heroku部署时React依赖冲突问题

执行git push heroku main部署时出现以下依赖错误：

remote: -----&gt; Installing dependencies
remote:        Prebuild detected (node_modules already exists)
remote:        Rebuilding any native modules
remote:        rebuilt dependencies successfully
remote:        Installing any new modules (package.json)
remote:        npm ERR! code ERESOLVE
remote:        npm ERR! ERESOLVE could not resolve
remote:        npm ERR!
remote:        npm ERR! While resolving: react-top-loading-bar@2.1.0
remote:        npm ERR! Found: react@18.2.0
remote:        npm ERR! node_modules/react
remote:        npm ERR!   react@"^18.2.0" from the root project
remote:        npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.3.0
remote:        npm ERR!   node_modules/@testing-library/react
remote:        npm ERR!     @testing-library/react@"^13.3.0" from the root project
remote:        npm ERR!   5 more (react-dom, react-infinite-scroll-component, ...)
remote:        npm ERR!
remote:        npm ERR! Could not resolve dependency:
remote:        npm ERR! peer react@"^16 || ^17" from react-top-loading-bar@2.1.0
remote:        npm ERR! node_modules/react-top-loading-bar
remote:        npm ERR!   react-top-loading-bar@"^2.1.0" from the root project
remote:        npm ERR!
remote:        npm ERR! Conflicting peer dependency: react@17.0.2
remote:        npm ERR! node_modules/react
remote:        npm ERR!   peer react@"^16 || ^17" from react-top-loading-bar@2.1.0
remote:        npm ERR!   node_modules/react-top-loading-bar
remote:        npm ERR!     react-top-loading-bar@"^2.1.0" from the root project

问题核心是react-top-loading-bar@2.1.0仅支持React 16/17版本，但当前项目使用的是React 18.2.0，导致npm无法解析依赖。以下是三种解决办法：

优先推荐：升级react-top-loading-bar到兼容React 18的版本
执行命令更新依赖：
```
npm install react-top-loading-bar@latest
```
该命令会将react-top-loading-bar更新到支持React 18的最新版本。更新完成后提交package.json和package-lock.json，再重新执行git push heroku main即可部署。
降级React到17版本（仅当无法升级加载条组件时使用）
先降级React和ReactDOM：
```
npm install react@^17.0.2 react-dom@^17.0.2
```
同时@testing-library/react@13.3.0依赖React 18，需要同步降级到支持React 17的版本：
```
npm install @testing-library/react@^12.1.5
```
处理完所有兼容问题后，提交修改后的配置文件再进行部署。
临时绕过peer依赖检查（不推荐长期使用）
如果只是临时需要部署，可以让npm忽略peer依赖冲突。修改项目根目录的package.json，在scripts中添加或修改install命令：
```
"scripts": {
  "install": "npm install --legacy-peer-deps",
  // 保留其他原有脚本
}
```
或者在Heroku的环境变量中设置NPM_CONFIG_LEGACY_PEER_DEPS=true，这样Heroku安装依赖时会自动应用该选项。

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