---------问题已解决 - 问题末尾的解决方案--------
我试图安装材质 UI 图标 https://mui.com/components/material-icons/在我使用 npm 的 Netflix-Clone React.js 项目中,但出现以下错误 -
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: [email protected] /cdn-cgi/l/email-protection
npm ERR! Found: [email protected] /cdn-cgi/l/email-protection
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR! peer react@">=16.8.0" from @emotion/[email protected] /cdn-cgi/l/email-protection
npm ERR! node_modules/@emotion/react
npm ERR! peerOptional @emotion/react@"^11.5.0" from @mui/[email protected] /cdn-cgi/l/email-protection
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/[email protected] /cdn-cgi/l/email-protection
npm ERR! node_modules/@emotion/styled
npm ERR! peerOptional @emotion/styled@"^11.3.0" from @mui/[email protected] /cdn-cgi/l/email-protection
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/[email protected] /cdn-cgi/l/email-protection
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/[email protected] /cdn-cgi/l/email-protection
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
file -
{
"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"
]
}
}
I saw a stackoverflow 上有类似问题的帖子 https://stackoverflow.com/questions/70587214/eresolve-unable-to-resolve-dependency-tree-for-mui-material,并尝试实施那里提到的解决方案,但没有成功。
- 首先,我重试了这个命令
--force
-
npm i @mui/icons-material @mui/material --force
这使我能够安装 MUI 图标包而不会出现任何错误,但是,当我尝试在项目中使用这些图标时,我遇到了许多错误。
- 接下来,我改变了
react
and react-dom
版本到 16.8.0package.json
文件,然后点击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: [email protected] /cdn-cgi/l/email-protection
npm ERR! Found: [email protected] /cdn-cgi/l/email-protection
npm ERR! node_modules/react
npm ERR! react@"^16.8.0" from the root project
npm ERR! peer react@">=16.8.0" from @emotion/[email protected] /cdn-cgi/l/email-protection
npm ERR! node_modules/@emotion/react
npm ERR! peerOptional @emotion/react@"^11.5.0" from @mui/[email protected] /cdn-cgi/l/email-protection
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/[email protected] /cdn-cgi/l/email-protection
npm ERR! node_modules/@emotion/styled
npm ERR! peerOptional @emotion/styled@"^11.3.0" from @mui/[email protected] /cdn-cgi/l/email-protection
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/[email protected] /cdn-cgi/l/email-protection
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/[email protected] /cdn-cgi/l/email-protection
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的帮助,终于成功了。我按照以下步骤操作 -
- 执行
npx create-react-app netflix
.
- Changed
react
and react-dom
版本为17.0.0从 18.0.0 开始。
- Deleted
package-lock.json
文件和node_modules
文件夹。
然后打npm install
.
- 执行
npm i @mui/icons-material @mui/material
...安装成功。
- 然而,在使用图标时,我再次遇到了一堆错误找不到模块:无法解析
@emotion/styled
。所以我不得不npm i @emotion/react @emotion/styled