Material UI Icons npm 安装问题：无法解析依赖关系树

Question

---------问题已解决 - 问题结束时的解决方案--------

我试图使用 npm 在我的 Netflix-Clone React.js 项目中安装 Material UI Icons，但出现以下错误 -

PS D:\REACT Projects\netflix> npm i @mui/icons-material @mui/material
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: netflix@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.8.2
npm ERR!   node_modules/@emotion/react
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.5.3
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.5.3" from the root project
npm ERR!       1 more (@mui/icons-material)
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.8.1
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.5.3
npm ERR!       node_modules/@mui/material
npm ERR!         @mui/material@"^5.5.3" from the root project
npm ERR!         1 more (@mui/icons-material)
npm ERR!   1 more (@emotion/styled)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/material@5.5.3
npm ERR! node_modules/@mui/material
npm ERR!   @mui/material@"^5.5.3" from the root project
npm ERR!   peer @mui/material@"^5.0.0" from @mui/icons-material@5.5.1
npm ERR!   node_modules/@mui/icons-material
npm ERR!     @mui/icons-material@"^5.5.1" 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.

以下是我的package.json 文件-

{
  "name": "netflix",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mui/icons-material": "^5.5.1",
    "@mui/material": "^5.5.3",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^14.0.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "sass": "^1.49.10",
    "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"
    ]
  }
}

我看到了stackoverflow post with similar issue，并尝试实施那里提到的解决方案，但没有成功。

1. 起初，我用--force 重试了这个命令 - npm i @mui/icons-material @mui/material --force

   这使我可以安装 MUI Icons 包而不会出现任何错误，但是，当我尝试在项目中使用这些图标时遇到了许多错误。

   2. 接下来，我将package.json 文件中的react 和react-dom 版本更改为16.8.0，然后点击npm install。然而，这一次我也得到了以下错误 -

   PS D:\REACT Projects\netflix> npm install
   npm ERR! code ERESOLVE
   npm ERR! ERESOLVE unable to resolve dependency tree
   npm ERR!
   npm ERR! While resolving: netflix@0.1.0
   npm ERR! Found: react@16.14.0
   npm ERR! node_modules/react
   npm ERR!   react@"^16.8.0" from the root project
   npm ERR!   peer react@">=16.8.0" from @emotion/react@11.8.2
   npm ERR!   node_modules/@emotion/react
   npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.5.3
   npm ERR!     node_modules/@mui/material
   npm ERR!       @mui/material@"^5.5.3" from the root project
   npm ERR!       1 more (@mui/icons-material)
   npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.8.1
   npm ERR!     node_modules/@emotion/styled
   npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.5.3
   npm ERR!       node_modules/@mui/material
   npm ERR!         @mui/material@"^5.5.3" from the root project
   npm ERR!         1 more (@mui/icons-material)
   npm ERR!   1 more (@emotion/styled)
   npm ERR!
   npm ERR! Could not resolve dependency:
   npm ERR! peer react@"^17.0.0" from @mui/material@5.5.3
   npm ERR! node_modules/@mui/material
   npm ERR!   @mui/material@"^5.5.3" from the root project
   npm ERR!   peer @mui/material@"^5.0.0" from @mui/icons-material@5.5.1
   npm ERR!   node_modules/@mui/icons-material
   npm ERR!     @mui/icons-material@"^5.5.1" from the root project
   npm ERR!
   npm ERR! Fix the upstream dependency conflict, or retry
   

   老实说，我现在不知道该怎么办。我认为互联网上会有更好的解决方案，但在任何地方我看到的答案都是相同的，要么使用 --force/--legacy-peer-deps ，要么降级我的 react/react-dom 版本。如上所述，这些选项都不起作用。 有没有更好的解决方案？老实说，我很惊讶这样一个知名的软件包在安装时会遇到这么多问题。

   编辑 - 问题已解决
   感谢@ckesplin 的帮助，它终于奏效了。我按照以下步骤操作 -

   1. 已执行npx create-react-app netflix。
   2. 将react 和react-dom 版本更改为17.0.0从 18.0.0.
   3. 已删除package-lock.json 文件和node_modules 文件夹。 然后点击npm install。
   4. 执行npm i @mui/icons-material @mui/material...安装成功。
   5. 但是，在使用图标时，我又遇到了一堆错误未找到模块：无法解析 @emotion/styled.所以我不得不npm i @emotion/react @emotion/styled

Answer 1

日志显示@mui/material@5.5.3 需要react@"^17.0.0"。 （您尝试同时反应 18.0.0 和 16.14.0，但不是 ^17.0.0）

替换您的package.json 中的以下内容，并给它npm install

 "dependencies": {
    ...
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    ...
  },

Answer 2

使用 --force 尝试该命令。 npm i @mui/icons-material @mui/material --force.这对我有用。

Answer 3

这也发生在我身上，您可以在命令的最后使用 --force 安装它。

npm i material-ui --force