React依赖树中的冲突

Question

在运行react应用程序时，我在控制台中遇到了这个错误--从2021年5月左右的M91开始，SharedArrayBuffer将需要跨源隔离。请参阅https://developer.chrome.com/blog/enabling-shared-array-buffer/了解更多详细信息。

根据StackOverflow的建议，我尝试更新react版本。我的版本是16，然后转到了17。但现在依赖树中存在冲突。当我尝试安装npm时,会出现以下错误：

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不让我这么做，我得到了上面给出的错误。

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

Answer 1

如果你有React版本17，你可以使用这个非官方的适配器React 17 for Enzyme。

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

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