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

Question

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.

Answer 1

This should allow a more flexible peer dependency resolution
npm install --legacy-peer-deps

Answer 2

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