无法解决来自 @material-ui/core@4.12.4 的依赖错误对等 React@"^16.8.0 || ^17.0.0"

Question

在尝试安装时npm install，出现以下错误，如何解决？

$

npm install
        npm ERR! code ERESOLVE
        npm ERR! ERESOLVE unable to resolve dependency tree
        npm ERR!
        npm ERR! While resolving: sssclub@0.1.0
        npm ERR! Found: react@18.1.0
        npm ERR! node_modules/react
        npm ERR!   react@"^18.0.0" from the root project
        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! 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.

// 包.json

{
      "name": "sssclub",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@emotion/react": "^11.9.0",
        "@emotion/styled": "^11.8.1",
        "@material-ui/core": "^4.12.4",
        "@mui/icons-material": "^5.8.3",
        "@mui/material": "^5.8.3",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.1.1",
        "@testing-library/user-event": "^13.5.0",
        "axios": "^0.27.2",
        "cors": "^2.8.5",
        "express": "^4.18.1",
        "multer": "^1.4.4",
        "mysql2": "^2.3.3",
        "path": "^0.12.7",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-hook-form": "^7.31.2",
        "react-router-dom": "^6.3.0",
        "react-scripts": "^5.0.1",
        "react-tweet-embed": "^2.0.0",
        "sequelize": "^6.20.1",
        "web-vitals": "^2.1.4"
      },
      "engines": {
        "node": "16.14.2",
        "npm": "8.5.0"
      },
      "proxy": "http://localhost:8000",
      "scripts": {
        "start": "react-scripts start",
        "start:server": "node src/server.js",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "preinstall": "npx npm-force-resolutions"
      },
      "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"
        ]
      }
    }

Answer 1

尝试这个

npm config set legacy-peer-deps true
npm i

Answer 2

npm install请使用代替npm install --legacy-peer-deps。

Answer 3

最重要的是，所有解决方案都是正确的。这里我会解释一下为什么我们需要在应用程序中设置legacy-peer-deps的解决方案。

对等依赖关系的概念可能会在安装软件包时带来挑战。考虑以下场景：

包 A 需要包 B，并且两者具有共同的对等依赖项包 C。但是，包 A 需要版本 1.x 中的包 C，而包 B 需要版本 2.x 中的包 C。

当您尝试在项目中一起安装包 A 和包 B 时，npm 可能会遇到冲突，因为每个包所需的对等依赖版本不同。这可能会导致安装失败，并且手动解决冲突变得具有挑战性。

“npm 配置设置legacy-peer-deps true”

为了减轻对等依赖冲突造成的复杂性，npm 引入了“legacy-peer-deps”配置标志。当设置为 true 时，此标志指示 npm 恢复到安装具有对等依赖项的包的旧行为。

“legacy-peer-deps”标志的工作原理如下：

如果一个包声明了对等依赖，npm 将安装指定的版本，而不验证它是否满足依赖包期望的版本范围。

该标志禁用对对等依赖项的严格版本检查，使其在安装过程中更加宽松。

用法和示例

要将“legacy-peer-deps”标志设置为 true，请打开终端并运行以下命令：

npm config set legacy-peer-deps true
npm install

Answer 4

删除node_modules文件夹并尝试以下命令

npm config set legacy-peer-deps true
npm install