React 依赖树中的冲突答案

【问题标题】：Conflicts in React dependency treeReact 依赖树中的冲突
【发布时间】：2021-07-19 03:24:51
【问题描述】：

运行 react 应用时，我在控制台中收到此错误 - SharedArrayBuffer 从 M91 开始需要跨域隔离，大约在 2021 年 5 月。有关更多详细信息，请参阅 https://developer.chrome.com/blog/enabling-shared-array-buffer/。

根据 StackOverflow 的建议，我尝试更新反应版本。我有版本 16 并切换到 17。但是现在依赖关系树中存在冲突。当我尝试 npm install 这是我得到的错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.1.5
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.1.1" from react-select@4.3.0
npm ERR!     node_modules/react-select
npm ERR!       react-select@"^4.2.1" from the root project
npm ERR!   17 more (@material-ui/core, @material-ui/lab, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14 || ^15.0.0 || ^16.0.0-alpha" from airbnb-prop-types@2.160
npm ERR! node_modules/airbnb-prop-types
npm ERR!   airbnb-prop-types@"^2.16.0" from enzyme-adapter-utils@1.14.0
npm ERR!   node_modules/enzyme-adapter-utils
npm ERR!     enzyme-adapter-utils@"^1.14.0" from enzyme-adapter-react-16@1.15.6    
npm ERR!     node_modules/enzyme-adapter-react-16
npm ERR!       dev enzyme-adapter-react-16@"^1.15.6" 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! See C:\Users\USER\AppData\Local\npm-cache\eresolve-report.txt for a full rport.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\USER\AppData\Local\npm-cache\_logs\2021-04-25T15_17_39_361Z-dbug.log

package.json：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "aos": "^2.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.1",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "^4.2.1",
    "react-spring": "^8.0.27",
    "styled-components": "^5.2.1",
    "web-vitals": "^1.1.0"
  },
  "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.6",
    "jest": "^26.6.0",
    "react-dev-utils": "^11.0.4"
  },
  "proxy": "http://localhost:8080"
}

据我了解，错误是由于酶的版本而发生的。我尝试将其升级到版本 17，但 react 不允许我这样做，并且出现上述错误。

解决依赖冲突的解决方案是什么？

【问题讨论】：

标签： node.js reactjs npm npm-install package.json

【解决方案1】：

如果你有 React 版本 17，你可以使用这个 unofficial adapter 用于 React 17 的酶。


import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

configure({ adapter: new Adapter() });

【讨论】：

npm 错误！ npm 错误！冲突的对等依赖关系：react@17.0.2 npm ERR！ node_modules/react npm 错误！ peer react@"^17.0.0-0" 来自@wojtekmaj/enzyme-adapter-react-17@0.6.1 npm ERR！ node_modules/@wojtekmaj/enzyme-adapter-react-17 npm 错误！ @wojtekmaj/enzyme-adapter-react-17@"*" 来自根项目

【解决方案2】：

我遇到了同样的问题，所以我用 yarn 安装了依赖项。它就像魔术一样工作。

【讨论】：

这听起来不错，值得记住，但我也想知道是否允许 react 和 enzyme-adapter-react-16 之间的版本类型不匹配，yarn 可能会允许其他地方的错误?

【解决方案3】：

您的 package.json 文件包含您正在使用的 React 版本的声明。只要您的项目具有 enzyme-adapter-react-16 所需的 React 版本所需的所有内容 - 即 ^16.4.0-0 according to Justin Mitchell - 您就可以使用它。

"dependencies": {
    ...
    "react": "^16.4.0-0",
    "react-dom": "^16.4.0-0",
    ...
}

【讨论】：