“Could not resolve dependency” error with “react@^16.0”

Current Behavior

Installing @react-navigation/stack fails due to dependency error.

How to reproduce

I’ve just created a new react-native application following these steps:

npx react-native init test
cd test
npm install @react-navigation/native 
npm install @react-navigation/stack --save 

Running npm install @react-navigation/stack --save results in:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: lc@0.0.1
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR!   peer react@"*" from @react-navigation/stack@5.14.3                               core/CMakeFiles/test-core_ty
npm ERR!   node_modules/@react-navigation/stack
npm ERR!     @react-navigation/stack@"*" from the root project                              st-bug_ms_vec_static
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0" from @react-native-community/masked-view@0.1.10                 test-core_type_mat4x3
npm ERR! node_modules/@react-native-community/masked-view
npm ERR!   peer @react-native-community/masked-view@">= 0.1.0" from @react-navigation/stack@5.14.3
npm ERR!   node_modules/@react-navigation/stack
npm ERR!     @react-navigation/stack@"*" from the root project                              pe_length
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps

This seems to be caused because the package.json from the react-native application template
has a dependency with react 17.0.1 instead of react 16. The package.json that I currently have
look like:

{
  "name": "lc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "exports": {
    "./": "./src/"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.14.1",
    "@react-navigation/native": "^5.9.3",
    "axios": "^0.21.1",
    "formik": "^2.2.6",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-query": "^3.12.1",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Your Environment

  • Android
  • Arch Linux 5.11.5
  • Nove 15.11.0
  • React Native 0.64.0

1 possible answer(s) on ““Could not resolve dependency” error with “react@^16.0”

  1. Like @yohandal123 said, when you try to install @react-navigation/stack@next you’ll run into the error below which you can fix by adding the --legacy-peer-deps: npm install @react-navigation/stack@next --legacy-peer-deps

    $ npm install @react-navigation/stack@next
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR! 
    npm ERR! While resolving: lc@0.0.1
    npm ERR! Found: @react-navigation/native@6.0.0-next.1
    npm ERR! node_modules/@react-navigation/native
    npm ERR!   @react-navigation/native@"^6.0.0-next.1" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer @react-navigation/native@"^6.0.0" from @react-navigation/stack@6.0.0-next.6
    npm ERR! node_modules/@react-navigation/stack
    npm ERR!   @react-navigation/stack@"6.0.0-next.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.