Conflicts in React dependency tree

user_15455557 0
Viewed 4917

When running the react app I got this error in console - SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Based on StackOverflow's suggestions I tried updating react version. I had version 16 and switched to 17. But now there are conflicts in the dependency tree. When I try to npm install this is the error I'm getting:

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"
}

As I understand the error occurs because of the version of the enzyme. I tried upgrading it to version 17, but react doesn't let me do it and I get the above-given error.

What could be the solution to resolve the dependency conflicts?

package.json npm npm-install reactjs node.js
3 Answers

I had the same issue, so I've installed the dependencies with yarn. and it worked like magic.

user_19012550

If you have React version 17, you can use this unofficial adapter for React 17 for enzyme.


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

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

Your package.json file contains the declaration of which version of React you're using. As long as your project is has all it needs from the version of React that enzyme-adapter-react-16 requires - which is ^16.4.0-0 according to Justin Mitchell - you can use that.

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