安装Material UI v5出现依赖解析错误，请求协助排查冲突

尝试安装Material UI v5时触发大量依赖解析错误，之前装V4也失败，原以为React 18.2.0不兼容V4，切换V5能解决，结果冲突依旧。执行命令npm i @mui/material @emotion/react @emotion/styled时出现ERESOLVE错误，具体信息和项目package.json如下，求排查冲突原因。

错误信息 #

npm i @mui/material @emotion/react @emotion/styled
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @material-ui/core@4.12.4
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     dev @testing-library/react@"^13.3.0" from the root project
npm ERR!   peer react@">=16" from phosphor-react@1.4.1
npm ERR!   node_modules/phosphor-react
npm ERR!     dev phosphor-react@"^1.4.1" from the root project
npm ERR!   18 more (react-dom, react-dropzone, react-media, react-popper, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"^4.12.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.12.4" from the root project
npm ERR!
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

项目package.json配置 #

{
  "name": "wordscramble",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.0",
    "jquery": "^3.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.2",
    "react-media": "^1.10.0",
    "react-router": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-tinder-card": "^1.4.5",
    "reactstrap": "^9.1.2",
    "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": {
    "@testing-library/react": "^13.3.0",
    "fetch-mock": "^9.11.0",
    "msw": "^0.44.2",
    "phosphor-react": "^1.4.1",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-test-renderer": "^18.2.0"
  }
}

解决方案 #

核心冲突原因 #

项目中残留了Material UI v4的依赖包@material-ui/core@4.12.4，它对React的peer依赖要求是^16.8.0 || ^17.0.0，与当前使用的React 18.2.0版本不兼容，这是触发ERESOLVE错误的根本原因。

具体修复步骤 #

1. 彻底卸载旧版本Material UI v4依赖：

   npm uninstall @material-ui/core
   

2. 重新安装Material UI v5的核心包：

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

3. （可选）如果之前使用了MUI v4的图标包@material-ui/icons，也需要替换为V5版本：

   npm uninstall @material-ui/icons
   npm i @mui/icons-material
   

注意事项 #

• 不要使用--force或--legacy-peer-deps强行跳过冲突，这会埋下运行时崩溃的隐患。
• Material UI v5完全兼容React 18，只要清理干净V4的相关依赖即可正常安装。

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