React项目安装Material UI遭遇npm依赖冲突问题求助

错误信息 #

PS C:\.............../app_1> npm install @mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react@13.4.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.2" from react-dom@17.0.2
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"^17.0.2" from the root project
npm ERR!     peer react-dom@"^17.0.0 || ^18.0.0" from @mui/material@5.11.4
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"*" from the root project
npm ERR!     2 more (@mui/base, react-transition-group)
npm ERR!   peer react@">= 16" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.1" from the root project
npm ERR!   8 more (the root project, @mui/material, @mui/base, @mui/system, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.4.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.4.0" 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\Christos\AppData\Local\npm-cache\_logs\2023-01-14T18_36_04_214Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Christos\AppData\Local\npm-cache\_logs\2023-01-14T18_36_04_214Z-debug-0.log

问题核心 #

冲突根源是项目里的@testing-library/react@13.4.0要求React版本必须为^18.0.0，但你的项目锁定了React 17.0.2。Material UI 5.x本身兼容React 17和18，所以问题出在测试库版本与React版本不匹配。

解决方案 #

• 方案一：降级测试库到兼容React 17的版本
  安装@testing-library/react的12.x系列版本（该版本支持React 16.8+和17.x）：

  npm install @testing-library/react@^12.1.5 --save-dev
  

  安装完成后再执行npm install @mui/material即可正常安装。

• 方案二：跳过peer依赖检查（快速临时解决）
  用--legacy-peer-deps参数跳过npm的peer依赖冲突检查，强制安装Material UI：

  npm install @mui/material --legacy-peer-deps
  

  注意：这种方法可能隐藏潜在兼容性问题，适合确认依赖实际能正常工作的场景。

• 方案三：升级React到18.x版本（长期解决方案）
  如果项目允许升级，先升级React和ReactDOM：

  npm install react@^18.2.0 react-dom@^18.2.0
  

  然后更新index.js的渲染逻辑，替换为React 18的createRoot方式：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

  完成后再执行npm install @mui/material即可无冲突安装。

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