尝试安装 Material UI v5 会导致“无法解决依赖性错误”答案

【问题标题】：Trying to install Material UI v5 causes ' could not resolve dependency errors '尝试安装 Material UI v5 会导致“无法解决依赖性错误”
【发布时间】：2023-02-12 21:58:07
【问题描述】：

尝试安装材料 ui 时会出现大量依赖项解析错误。不太确定是什么原因。我之前尝试安装 V4 并遇到错误，我认为我可以通过使用 V5 来解决，因为这个版本的 React 与 V4 不兼容，但我不知道其余的冲突。

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.

包.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"
  }
}

任何帮助识别任何潜在冲突的帮助将不胜感激，谢谢！

【问题讨论】：

标签： javascript reactjs npm material-ui dependencies

【解决方案1】：

1-卸载@material-ui:

 npm uninstall @material-ui/core

2 - 安装梅伊v5:

npm install @mui/material @mui/styled-engine-sc styled-components

【讨论】：

【解决方案2】：

与--legacy-peer-deps 一起工作：

npm i @mui/material @emotion/react @emotion/styled --legacy-peer-deps

有关更多详细信息，请参阅此答案的 React v17 部分https://stackoverflow.com/a/66620869/1515819

【讨论】：