You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Heroku部署Node.js前端应用遇依赖冲突问题求助

avatar
API 探路者
2026-7-23
解决Heroku部署Node.js前端应用的依赖冲突问题

问题概述

本地环境使用原始package.json可正常编译运行，但部署到Heroku时连续出现对等依赖冲突错误：

首次部署错误：@material-ui/styles与@types/react版本冲突

Heroku构建日志报错：

-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  ^16.18.23
       engines.npm (package.json):   9.6.5
       
       Resolving node version ^16.18.23...
       Downloading and installing node 16.20.0...
       Bootstrapping npm 9.6.5 (replacing 8.19.4)...
       npm 9.6.5 installed
       
-----> Installing dependencies
       Installing node modules
       npm ERR! code ERESOLVE
       npm ERR! ERESOLVE could not resolve
       npm ERR! 
       npm ERR! While resolving: @material-ui/styles@4.11.5
       npm ERR! Found: @types/react@18.2.0
       npm ERR! node_modules/@types/react
       npm ERR!   @types/react@"^18.2.0" from the root project
       npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
       npm ERR!   node_modules/@material-ui/types
       npm ERR!     @material-ui/types@"5.1.0" from @material-ui/styles@4.11.5
       npm ERR!     node_modules/@material-ui/styles
       npm ERR!       @material-ui/styles@"^4.11.5" from the root project
       npm ERR!   9 more (@mui/base, @mui/icons-material, @mui/material, ...)
       npm ERR! 
       npm ERR! Could not resolve dependency:
       npm ERR! peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/styles@4.11.5
       npm ERR! node_modules/@material-ui/styles
       npm ERR!   @material-ui/styles@"^4.11.5" from the root project
       npm ERR! 
       npm ERR! Conflicting peer dependency: @types/react@17.0.58
       npm ERR! node_modules/@types/react
       npm ERR!   peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/styles@4.11.5
       npm ERR!   node_modules/@material-ui/styles
       npm ERR!     @material-ui/styles@"^4.11.5" from the root project
       npm ERR! 
       npm ERR! Fix the upstream dependency conflict, or retry
       npm ERR! this command with --force or --legacy-peer-deps
       npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
       npm ERR! 
       npm ERR! 
       npm ERR! For a full report see:
       npm ERR! /tmp/npmcache.CSqFU/_logs/2023-04-25T19_52_14_561Z-eresolve-report.txt
       
       npm ERR! A complete log of this run can be found in: /tmp/npmcache.CSqFU/_logs/2023-04-25T19_52_14_561Z-debug-0.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

冲突原因：@material-ui/styles@4.11.5仅支持@types/react版本^16.8.6 || ^17.0.0，但项目使用的是@types/react@18.2.0。

降级React到17.x后的新错误：@testing-library/react版本冲突

将react、react-dom、@types/react、@types/react-dom降级到17.x版本后，Heroku又报错：

-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  ^16.18.23
       engines.npm (package.json):   9.6.5
       
       Resolving node version ^16.18.23...
       Downloading and installing node 16.20.0...
       Bootstrapping npm 9.6.5 (replacing 8.19.4)...
       npm 9.6.5 installed
       
-----> Installing dependencies
       Installing node modules
       npm ERR! code ERESOLVE
       npm ERR! ERESOLVE could not resolve
       npm ERR! 
       npm ERR! While resolving: @testing-library/react@13.4.0
       npm ERR! Found: react@17.0.2
       npm ERR! node_modules/react
       npm ERR!   react@"^17.0.0" from the root project
       npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.6
       npm ERR!   node_modules/@emotion/react
       npm ERR!     @emotion/react@"^11.10.6" from the root project
       npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.6
       npm ERR!     node_modules/@emotion/styled
       npm ERR!       @emotion/styled@"^11.10.6" from the root project
       npm ERR!       4 more (@mui/material, @mui/styled-engine, @mui/system, @mui/x-date-pickers)
       npm ERR!     4 more (@mui/material, @mui/styled-engine, @mui/system, @mui/x-date-pickers)
       npm ERR!   17 more (@emotion/styled, ...)
       npm ERR! 
       npm ERR! Could not resolve dependency:
       npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
       npm ERR! node_modules/@testing-library/react
       npm ERR!   @testing-library/react@"^13.4.0" from the root project
       npm ERR! 
       npm ERR! Conflicting peer dependency: react@18.2.0
       npm ERR! node_modules/react
       npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
       npm ERR!   node_modules/@testing-library/react
       npm ERR!     @testing-library/react@"^13.4.0" from the root project
       npm ERR! 
       npm ERR! Fix the upstream dependency conflict, or retry
       npm ERR! this command with --force or --legacy-peer-deps
       npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
       npm ERR! 
       npm ERR! 
       npm ERR! For a full report see:
       npm ERR! /tmp/npmcache.N6UAz/_logs/2023-04-25T20_19_13_720Z-eresolve-report.txt
       
       npm ERR! A complete log of this run can be found in: /tmp/npmcache.N6UAz/_logs/2023-04-25T20_19_13_720Z-debug-0.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

冲突原因：@testing-library/react@13.4.0要求react版本^18.0.0，与当前使用的react@17.0.2不兼容。

解决方案

方案1：启用npm的legacy-peer-deps跳过对等依赖检查

npm 7+默认严格检查对等依赖，本地可能因为环境配置或缓存跳过了检查，Heroku上可以通过以下方式开启兼容模式：

  • 在package.json中添加heroku-prebuild脚本，让Heroku安装依赖前启用legacy-peer-deps：
    "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "heroku-prebuild": "npm config set legacy-peer-deps true"
}
  • 或者直接在Heroku设置环境变量NPM_CONFIG_LEGACY_PEER_DEPS=true（通过Heroku控制台或CLI设置）。

方案2：替换@material-ui/styles为兼容React 18的@mui/styles

@material-ui/styles是MUI v4的包，而项目中其他MUI依赖都是v5版本，建议替换为MUI v5的@mui/styles，它完全兼容React 18：

  1. 修改package.json中的依赖，将"@material-ui/styles": "^4.11.5"替换为"@mui/styles": "^5.11.16"（与其他MUI包版本保持一致）
  2. 本地执行npm install更新依赖
  3. 重新部署到Heroku

方案3：降级测试库适配React 17

如果坚持使用React 17，需要将测试库降级到支持React 17的版本：

  • 将@testing-library/react降级到^12.1.5
  • 将@testing-library/user-event降级到^14.4.3（适配v12版本）
  • 修改后执行npm install，再部署到Heroku

修改后的package.json示例（方案2） 

{
  "name": "mui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/styles": "^5.11.16",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.11.16",
    "@mui/x-date-pickers": "^6.1.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.23",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "dayjs": "^1.11.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "prettier": "2.8.7"
  },
  "engines": {
    "node": "^16.18.23",
    "npm": "9.6.5"
  }
}

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.23 11:24:52