Vercel部署时@material-ui/core与@types/react版本冲突求助

问题核心 #

你遇到的是**@material-ui/core@4.12.4与@types/react@18.x**的peer依赖冲突：

• @material-ui/core v4仅兼容@types/react@^16.8.6 || ^17.0.0
• 尽管你在package.json中指定了@types/react: "^17.0.0"，但项目中的@mui/system@5.15.7（MUI v5包）会间接拉取@types/react v18，导致依赖解析失败。

解决方案 #

方案1：锁定@types/react到兼容的17.x版本

修改package.json中的依赖配置，将@types/react固定为与@material-ui/core v4兼容的具体版本：

{
  "@material-ui/core": "^4.12.4",
  "@mui/system": "^5.15.7",
  "@types/react": "17.0.75",
  "@types/react-dom": "17.0.25" // 若项目用到react-dom，需同步锁定版本
}

删除node_modules和package-lock.json后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

最后重新触发Vercel部署即可。

方案2：强制忽略依赖冲突（临时应急）

如果需要快速完成部署，可在Vercel的部署设置中修改构建命令，添加--force参数强制安装：

npm install --force && npm run build

注意：此方法仅作为临时解决方案，长期使用可能隐藏潜在的依赖兼容性问题。

方案3：升级到MUI v5（长期最优解）

@material-ui/core v4已停止维护，且与MUI v5包（如@mui/system）混用容易引发依赖问题。建议升级到MUI v5：

1. 卸载旧版依赖：

npm uninstall @material-ui/core

2. 安装MUI v5核心包：

npm install @mui/material @emotion/react @emotion/styled

3. 更新@types/react到v18（MUI v5完全兼容React 18）：

{
  "@types/react": "^18.0.0",
  "@types/react-dom": "^18.0.0"
}

完成后重新安装依赖并部署，彻底解决版本冲突问题。

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