React 18与@mui/styles依赖冲突致Vercel/Netlify部署失败

我的依赖配置 #

"name": "get_it_done",
  "version": "1.0.0",
  "private": true,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/lab": "^5.0.0-alpha.134",
    "@mui/material": "^5.13.6",
    "@mui/styles": "^5.13.2",
    "@mui/system": "^5.13.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "chart.js": "^4.3.0",
    "chartjs": "^0.3.24",
    "humanize-duration": "^3.28.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "^5.0.1",
    "uuid": "^9.0.0",
    "web-vitals": "^3.3.2"
  },

部署错误信息 #

npm ERR! 代码 ERESOLVE npm ERR! ERESOLVE 无法解析依赖关系 npm ERR!
npm ERR! 解析@mui/styles@5.13.2时出错 npm ERR! 已找到：
react@18.2.0 npm ERR! node_modules/react npm ERR! 根项目依赖react@"^18.2.0" npm ERR! @emotion/react@11.11.1要求peer依赖react@">=16.8.0" npm ERR! node_modules/@emotion/react npm ERR! 根项目依赖@emotion/react@"^11.11.1" npm ERR! @emotion/styled@11.11.0要求peer依赖@emotion/react@"^11.0.0-rc.0" npm ERR!
node_modules/@emotion/styled npm ERR! 根项目依赖@emotion/styled@"^11.11.0" npm ERR! 另有4个依赖（@mui/lab、@mui/material、@mui/styled-engine、@mui/system）也依赖它 npm ERR! 另有4个依赖（@mui/lab、@mui/material、@mui/styled-engine、@mui/system）也依赖@emotion/react npm ERR! 还有18个依赖（@emotion/styled等）依赖react npm ERR! npm ERR! 无法解析依赖：npm ERR! @mui/styles@5.13.2要求peer依赖react@"^17.0.0" npm ERR! node_modules/@mui/styles npm ERR! 根项目依赖@mui/styles@"^5.13.2" npm ERR! npm ERR! 冲突的peer依赖：react@17.0.2 npm ERR! node_modules/react npm ERR! @mui/styles@5.13.2要求peer依赖react@"^17.0.0" npm ERR!
node_modules/@mui/styles npm ERR! 根项目依赖@mui/styles@"^5.13.2" npm ERR! npm ERR! 请修复上游依赖冲突，或者使用--force或--legacy-peer-deps参数重试命令 npm ERR! 以接受一个不正确（可能会导致运行异常）的依赖解析结果。npm ERR! npm ERR! 完整报告请查看：npm ERR! /vercel/.npm/_logs/2023-07-01T11_25_44_295Z-eresolve-report.txt npm ERR! 本次运行的完整日志可在以下位置找到：npm ERR!
/vercel/.npm/_logs/2023-07-01T11_25_44_295Z-debug-0.log 错误：命令"npm install"退出，代码为1 BUILD_UTILS_SPAWN_1：命令"npm install"退出，代码为1

已尝试的解决方法 #

• 安装最新版本的MUI
• 删除并重新安装node_modules

解决方案 #

方法1：移除@mui/styles依赖 #

@mui/styles是MUI的旧版样式方案，现已不再推荐使用，且5.13.2版本明确要求React 17作为peer依赖，和项目中的React 18完全冲突。如果你没有直接使用@mui/styles的API（比如makeStyles、withStyles），直接从package.json中删除该依赖即可：

npm uninstall @mui/styles
npm install

方法2：用--legacy-peer-deps绕过依赖检查 #

如果必须保留@mui/styles，可让部署平台在安装依赖时使用--legacy-peer-deps参数，跳过peer依赖冲突检查：

• Vercel：进入项目设置 → 构建和开发设置 → 把构建命令改为npm install --legacy-peer-deps && npm run build
• Netlify：进入站点设置 → 构建和部署 → 把构建命令改为npm install --legacy-peer-deps && npm run build

方法3：升级@mui/styles到兼容React 18的版本 #

检查@mui/styles的最新版本，确认是否已支持React 18，若有兼容版本直接升级：

npm install @mui/styles@latest

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