升级到 MUI 版本 5 时出现的依赖问题

huangapple go评论62阅读模式
英文:

Dependency issues upgrading to MUI version 5

问题

我正在尝试将 MUI v4 升级到 MUI v5,我已经阅读了有关迁移到 v5 的文档 在此处

运行 npm update 时,我遇到了这个错误信息:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: placemaker@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@^18.2.0 from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@^17.0.0 from @mui/styles@5.11.7
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@^5.10.16 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:

Log files:

C:\Users\...\...\...\file.log

# npm resolution error report

While resolving: app@0.1.0
Found: react@18.2.0
node_modules/react
  react@^18.2.0 from the root project

Could not resolve dependency:
peer react@^17.0.0 from @mui/styles@5.11.7
node_modules/@mui/styles
  @mui/styles@^5.10.16 from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

我的 package.json 依赖项如下:

"dependencies": {
    "@auth0/auth0-react": "^1.12.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.10.16",
    "@mui/material": "^5.10.16",
    "@mui/styles": "^5.10.16",
    "@mui/x-data-grid": "^5.17.13",
    "@mui/x-date-pickers": "^5.0.9",
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/multer": "^1.4.7",
    "@types/node": "^16.18.3",
    "@types/pg": "^8.6.5",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "@types/react-redux": "^7.1.24",
    "auth0": "^3.1.1",
    "autosuggest-highlight": "^3.3.4",
    "axios": "^0.27.2",
    "cors": "^2.8.5",
    "dayjs": "^1.11.6",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "express-oauth2-jwt-bearer": "^1.2.0",
    "express-promise-router": "^4.1.1",
    "helmet": "^6.0.1",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^2.0.20",
    "pg": "^8.8.0",
    "pg-format": "^1.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.40.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-select": "^5.6.1",
    "socket.io": "^4.5.4",
    "socket.io-client": "^4.5.4",
    "typescript": "^4.9.3",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/autosuggest-highlight": "^3.2.0",
    "@types/cors": "^2.8.12",
    "@types/dotenv": "^8.2.0",
    "@types/google.maps": "^3.50.5",
    "@types/helmet": "^4.0.0",
    "@types/uuid": "^8.3.4",
    "concurrently": "^7.6.0",
    "react-scripts": "5.0.1"
  }
}

我不确定如何解决这个问题,日志告诉我 react@^17.0.0 应该可以工作,但我正在运行版本 18。

npm audit --production 提供了以下信息:

# npm audit report

json5  2.0.0 - 2.2.1
Severity: high
Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h
fix available via `npm audit fix`
node_modules/json5

1 high severity vulnerability

希望这可以帮助你解决问题。

英文:

I'm trying to upgrade MUI v4 to MUI v5, and I've read the docs in migrating to v5 here.

I get this error message when running npm update

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: placemaker@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.11.7
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"^5.10.16" 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:

Log files:

C:\Users\...\...\...\file.log

# npm resolution error report

While resolving: app@0.1.0
Found: react@18.2.0
node_modules/react
  react@"^18.2.0" from the root project

Could not resolve dependency:
peer react@"^17.0.0" from @mui/styles@5.11.7
node_modules/@mui/styles
  @mui/styles@"^5.10.16" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

my package.json dependencies

"dependencies": {
    "@auth0/auth0-react": "^1.12.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.10.16",
    "@mui/material": "^5.10.16",
    "@mui/styles": "^5.10.16",
    "@mui/x-data-grid": "^5.17.13",
    "@mui/x-date-pickers": "^5.0.9",
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/multer": "^1.4.7",
    "@types/node": "^16.18.3",
    "@types/pg": "^8.6.5",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "@types/react-redux": "^7.1.24",
    "auth0": "^3.1.1",
    "autosuggest-highlight": "^3.3.4",
    "axios": "^0.27.2",
    "cors": "^2.8.5",
    "dayjs": "^1.11.6",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "express-oauth2-jwt-bearer": "^1.2.0",
    "express-promise-router": "^4.1.1",
    "helmet": "^6.0.1",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^2.0.20",
    "pg": "^8.8.0",
    "pg-format": "^1.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.40.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-select": "^5.6.1",
    "socket.io": "^4.5.4",
    "socket.io-client": "^4.5.4",
    "typescript": "^4.9.3",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/autosuggest-highlight": "^3.2.0",
    "@types/cors": "^2.8.12",
    "@types/dotenv": "^8.2.0",
    "@types/google.maps": "^3.50.5",
    "@types/helmet": "^4.0.0",
    "@types/uuid": "^8.3.4",
    "concurrently": "^7.6.0",
    "react-scripts": "5.0.1"
  },

Not sure how to fix this, it appears the log tells me that react@^17.0.0 should work and I'm running version 18.

npm auidt --production provides the following info:

# npm audit report

json5  2.0.0 - 2.2.1
Severity: high
Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h
fix available via `npm audit fix`
node_modules/json5

1 high severity vulnerability

答案1

得分: 1

尝试使用npm-check-updates更新您的依赖项。
https://www.npmjs.com/package/npm-check-updates

英文:

Try to update your dependencies using npm-check-updates
https://www.npmjs.com/package/npm-check-updates

答案2

得分: 1

发现,我在阅读 MUI 文档时并不彻底,我必须执行以下操作:

  • npm uninstall @mui/style
  • npm i @mui/system

替换旧的依赖于 @mui/style 的代码

这样移除了版本不匹配的问题。

我尝试了不同的方法,比如 npm update --force / npm audit fix --force,但这只会使情况变得更糟,降级到不同的包,导致更多的漏洞。

感谢大家的帮助!将接受 sancelots 的答案,尽管我没有尝试它,但它似乎是一种适合初学者的解决方案

英文:

Turns out, I was not thorough in reading the MUI docs, I had to:

  • npm uninstall @mui/style
  • npm i @mui/system

replace old code that was dependent on @mui/style

This removed the version mismatch.

I tried different ways i.e npm update --force / npm audit fix --force which just made it worse by downgrading to different packages creating many more vulnerabilities.

Thanks all for the help! Will accept sancelots answer though I did not try it, it seems like a beginner friendly solution

huangapple
  • 本文由 发表于 2023年2月14日 03:55:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75440606.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定