材料UI图标npm安装问题:无法解析相关性树

bjg7j2ky  于 2022-11-14  发布在  其他
关注(0)|答案(3)|浏览(156)

---------问题已解决-问题结尾处的解决方案-------

我试图用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图标包而没有任何错误,然而,当我试图在我的项目中使用图标时,我面临着许多错误。
1.接下来,我将package.json文件中的reactreact-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
1.将reactreact-dom版本从18.0.0更改为17.0.0
1.删除了package-lock.json文件和node_modules文件夹。然后点击npm install
1.已执行npm i @mui/icons-material @mui/material...已成功安装。
1.但是,在使用图标时,我再次收到了一系列错误 *Module not found:无法解析@emotion/styled *。因此我必须解析npm i @emotion/react @emotion/styled

hk8txs48

hk8txs481#

日志显示@mui/material@5.5.3需要react@"^17.0.0"。(您尝试了18.0.0和16.14.0的响应,但未尝试^17.0.0)
替换package.json内部的以下内容,并将其替换为ol' npm install

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

q8l4jmvw2#

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

dpiehjr4

dpiehjr43#

我也遇到过这种情况,你可以在命令的最后使用--force来安装它。

npm i material-ui --force

相关问题