ERESOLVE unable to resolve dependency tree in my react native web project

user_12238166 0
Viewed 1021

I got a react native web template that I am trying to make work. So I installed @reduxjs/toolkit for my state management. But I ran into an error when running the project after installation.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@16.9.0
npm ERR! node_modules/react
npm ERR!   peer react@"16.9.0" from react-native@0.61.5
npm ERR!   node_modules/react-native
npm ERR!     peer react-native@"^0.61.0" from @react-native-community/cli@3.2.1
npm ERR!     node_modules/@react-native-community/cli
npm ERR!       @react-native-community/cli@"^3.0.0" from react-native@0.61.5
npm ERR!     react-native@"^0.61.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @reduxjs/toolkit@"^1.6.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peerOptional react@"^16.14.0 || ^17.0.0" from @reduxjs/toolkit@1.6.0
npm ERR!   node_modules/@reduxjs/toolkit
npm ERR!     @reduxjs/toolkit@"^1.6.0" 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.

These are the dependecies and devDependencies for the package.json files for each directory. root/packages/common

{
  "name": "@monorepo/common",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "rm -rf dist && tsc",
    "watch": "tsc --watch"
  },
  "license": "MIT",
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.0",
    "grunt-sync": "^0.8.2",
    "react-native": "^0.61.5"
  },
  "devDependencies": {
    "@types/react-native": "^0.61.16",
    "grunt": "^1.4.1",
    "grunt-contrib-watch": "^1.1.0",
    "typescript": "^3.8.2"
  }
}

root/packages/mobile

"dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.5"
  },
  "devDependencies": {
    "@monorepo/common": "1.0.0",
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/react": "^16.9.2",
    "@types/react-native": "^0.60.14",
    "@types/react-test-renderer": "^16.9.0",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.6",
    "typescript": "^3.6.3"
  }

root/packages/web

"dependencies": {
    "@monorepo/common": "1.0.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-native-web": "^0.12.1",
    "react-scripts": "3.4.0",
    "typescript": "~3.7.2"
  },
"devDependencies": {
    "@types/react-native": "^0.61.16",
    "cross-env": "^7.0.3",
    "uuid": "^8.3.2"
  }

I tried upgrading to the latest packages, but I still run into the same error, this time the conflict is somewhere else, and the top dependency is still @react-native-community/cli.

react-native reactjs
2 Answers

This should allow a more flexible peer dependency resolution

npm install --legacy-peer-deps
user_27562430

Faced the same problem. Unable to install '@reduxjs/toolkit' due to a mismatch of the react version(>17.0.0). You need to update the react to the latest (preferably) version. To do this, delete the folders 'react', 'react-dom', 'react-native' from the node_modules folder. Next, write the command in the terminal in the project directory:

npm install react@latest react-dom@latest react-native@latest

Next, if everything went well, you can check which versions you have now, if everything is correct, then we calmly install the Redux toolkit with the command:

npm install @reduxjs/toolkit

Personally, it helped me

user_171222920
Related