React项目中MUI包的npm依赖冲突问题求助

问题核心 #

项目使用React 18.2.0，执行npm install @types/react@latest时出现依赖冲突，根源是**@mui/styles@5.11.12要求peer依赖React ^17.0.0**，与当前React 18版本不兼容。重装node_modules、更新冲突包均无效，目前只能通过--force勉强安装，需彻底解决。

错误日志 #

PS I:\MyProject\Frontend\Employee_Training_Development> npm install @types/react@latest
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: employee-training-development@0.0.0
npm WARN Found: @types/react@18.0.28
npm WARN node_modules/@types/react
npm WARN   peerOptional @types/react@"^17.0.0 || ^18.0.0" from @mui/base@5.0.0-alpha.118
npm WARN   node_modules/@mui/base
npm WARN     @mui/base@"5.0.0-alpha.118" from @mui/material@5.11.10
npm WARN     node_modules/@mui/material
npm WARN   9 more (@mui/icons-material, @mui/material, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional @types/react@"^17.0.0" from @mui/styles@5.11.12
npm WARN node_modules/@mui/styles
npm WARN   @mui/styles@"^5.11.12" from the root project
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @mui/styles@5.11.12
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.6
npm ERR!   node_modules/@emotion/react
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.6
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.11.10
npm ERR!       node_modules/@mui/material
npm ERR!         peer @mui/material@"^5.0.0" from @mui/icons-material@5.11.9
npm ERR!         node_modules/@mui/icons-material
npm ERR!         1 more (the root project)
npm ERR!       3 more (@mui/styled-engine, @mui/system, the root project)
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.11.10
npm ERR!     node_modules/@mui/material
npm ERR!       peer @mui/material@"^5.0.0" from @mui/icons-material@5.11.9
npm ERR!       node_modules/@mui/icons-material
npm ERR!         @mui/icons-material@"^5.11.9" from the root project
npm ERR!       1 more (the root project)
npm ERR!     3 more (@mui/styled-engine, @mui/system, the root project)
npm ERR!   peer react@">=16.8.0" from @emotion/styled@11.10.6
npm ERR!   node_modules/@emotion/styled
npm ERR!     peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.11.10
npm ERR!     node_modules/@mui/material
npm ERR!       peer @mui/material@"^5.0.0" from @mui/icons-material@5.11.9
npm ERR!       node_modules/@mui/icons-material
npm ERR!         @mui/icons-material@"^5.11.9" from the root project
npm ERR!       1 more (the root project)
npm ERR!     peerOptional @emotion/styled@"^11.3.0" from @mui/styled-engine@5.11.11
npm ERR!     node_modules/@mui/styled-engine
npm ERR!       @mui/styled-engine@"^5.11.11" from @mui/system@5.11.12
npm ERR!       node_modules/@mui/system
npm ERR!         @mui/system@"^5.11.9" from @mui/material@5.11.10
npm ERR!         node_modules/@mui/material
npm ERR!         1 more (the root project)
npm ERR!     2 more (@mui/system, the root project)
npm ERR!   17 more (@emotion/use-insertion-effect-with-fallbacks, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.11.12
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"^5.11.12" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR!   peer react@"^17.0.0" from @mui/styles@5.11.12
npm ERR!   node_modules/@mui/styles
npm ERR!     @mui/styles@"^5.11.12" 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! C:\Users\isuru\AppData\Local\npm-cache\_logs\2023-04-15T18_54_42_755Z-eresolve-report.txt

package.json内容 #

{
  "name": "employee-training-development",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fontsource/roboto": "^4.5.8",
    "@mui/icons-material": "^5.11.9",
    "@mui/material": "^5.11.10",
    "@mui/styled-engine-sc": "^5.11.11",
    "@mui/styles": "^5.11.12",
    "@mui/system": "^5.11.12",
    "@tanstack/react-query": "^4.26.1",
    "axios": "^1.3.4",
    "echarts": "^5.4.2",
    "jodit-react": "^1.3.36",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "styled-components": "^5.3.8"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

解决办法 #

1. 彻底移除@mui/styles（推荐）

MUI v5官方已弃用@mui/styles，建议改用@mui/system或@emotion/styled替代：

• 执行卸载：npm uninstall @mui/styles
• 修改代码中makeStyles等@mui/styles相关用法，替换为组件的sx属性或@mui/system的styled方法
• 重新安装依赖：npm install

2. 升级@mui/styles到兼容React 18的版本

@mui/styles后续版本已支持React 18，直接升级即可：

npm install @mui/styles@latest
npm install @types/react@latest

3. 临时跳过peer依赖检查（不推荐长期使用）

如果暂时无法修改代码或升级包，可使用--legacy-peer-deps参数跳过冲突检查，比--force更安全：

npm install @types/react@latest --legacy-peer-deps

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