React / React-DOM 包依赖冲突

Question

每次尝试运行 npm update 时，我都会遇到此错误消息：

：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^16.8.0" from the root project
npm ERR!   peer react@"^16.8.0" from @material-ui/[email protected]
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.11.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^17.0.1" from the root project

当我尝试运行 npm install react-parallax 时，我在控制台中收到此错误消息：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
        
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^16.8.0" from the root project
npm ERR!   peer react@"16.x.x" from [email protected]
npm ERR!   node_modules/react-parallax
npm ERR!     react-parallax@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from [email protected]
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^17.0.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": "my-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^16.8.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.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"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "enzyme-to-json": "^3.6.1"
  },
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "collectCoverageFrom": [
      "src/**/*.js",
      "!src/index.js"
    ],
    "coverageReporters": [
      "text"
    ]
  }
}

我尝试删除我的node_modules文件夹，npm安装，但这似乎没有成功。我没有花很多时间处理这些类型的错误来理解控制台到底要求我修复什么对我来说有点陌生。问题到底是什么，我该如何解决它，以及如何阻止将来发生这种情况？

Answer 1

您可以尝试使用

npm install --legacy-peer-deps

运行它吗？我认为您正在使用 npm v7 的最新 Beta 版本。

错误消息中也提到了。

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.

您可以在此处

查看有关测试版的更多信息

Answer 2

您可以使用 npm install --legacy-peer-deps 它将自动解决所有冲突。

Answer 3

如果只有

这个答案

不起作用，您可以尝试npm install --force。

减弱 - 不是一个好的做法

Answer 4

您只需要重新运行此命令，直到它得到验证。 npx 柏树打开

Answer 5

检查你的react和react-dom版本是否兼容：

https://www.npmpeer.dev/packages/react-dom/compatibility

我不建议使用：

npm install --legacy-peer-deps

即使您在本地修复了问题，它也会显示何时有人想要使用

npm i

安装 deps。例如，这个问题可能会出现在您的 CI 中，您可能使用简单的

npm i

而不带标志。

Answer 6

这是由于版本不兼容造成的问题，例如node-sass版本4与node版本16不兼容。这可以通过将node版本降级到14然后使用nvm use [node-version]来实现。 要下载多个节点版本， 访问此链接

Answer 7

尝试运行该应用程序。

npm 启动

如果出现任何错误，只需使用

npm install web-vitals

然后再次运行它。我希望这会有所帮助