React项目部署Vercel时遇@material-ui依赖冲突求助

问题背景 #

我正在部署一个使用@material-ui图标和组件的React项目，在Vercel平台部署时遇到依赖冲突错误。我的package.json配置如下：

{
  "name": "course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^9.21.0",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-fade-in": "^2.0.1",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.11.1",
    "react-scripts": "5.0.1",
    "react-textarea-autosize": "^8.4.1",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "uuid": "^9.0.0",
    "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": {
    "redux-devtools-extension": "^2.13.9"
  }, 
  
  "peerDependencies": {
    "react": "^18.1.0"
  }
}

我已尝试执行npm install --save --legacy-peer-deps命令，并在配置文件中添加"peerDependencies": {"react": "^18.1.0"}，但问题仍未解决。

有效解决措施 #

1. 移除手动添加的peerDependencies配置 #

你手动添加的react: ^18.1.0 peer依赖是多余的，反而可能和项目中已有的react@18.2.0以及其他依赖的peer要求产生冲突。Material UI v4本身对React的peer依赖要求是^16.8.0 || ^17.0.0 || ^18.0.0，完全兼容你当前的React版本，直接删除package.json中的peerDependencies字段即可。

2. 配置Vercel使用--legacy-peer-deps进行依赖安装 #

本地执行npm install --legacy-peer-deps能解决依赖问题，但Vercel默认部署时会使用npm install不带额外参数，所以需要在Vercel项目中手动配置安装命令：

• 进入你的Vercel项目后台，点击Settings -> Build & Development Settings
• 在Install Command输入框中填写：npm install --legacy-peer-deps
• 保存设置后重新触发部署

3. 清理Vercel缓存后重新部署 #

Vercel可能缓存了之前有问题的依赖包，导致新的配置不生效：

• 在Vercel项目的Deployments页面，找到最新的部署记录，点击右侧的⋮菜单
• 选择Redeploy，并勾选Redeploy with Build Cache Cleared选项
• 等待部署完成，查看是否解决冲突

4. 可选：升级到Material UI v5（彻底解决兼容问题） #

如果项目改动范围允许，建议升级到Material UI v5（现在叫MUI），它对React 18的支持更完善，peer依赖配置更现代化，从根源上避免这类冲突：

• 卸载旧包：npm uninstall @material-ui/core @material-ui/icons
• 安装新包：npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
• 逐步替换项目中旧的Material UI组件导入路径（比如@material-ui/core/Button换成@mui/material/Button）

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