Can't upgrade React-Native project due dependencies

user_4415902 0
Viewed 14230

I am trying to update my RN project from 0.62.2 to the latest one (currently 0.63.3). I am just running npm update and get errors:

npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from react-native@0.63.3
npm ERR! node_modules/react-native
npm ERR!   react-native@"^0.63.3" 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.

Before running npm update I had ran npx npm-check-updates -u and got the following:

 @react-native-community/netinfo          ^5.9.5  →   ^5.9.9     
 @react-navigation/drawer                 ^5.8.6  →  ^5.11.4     
 @react-navigation/native                 ^5.7.1  →  ^5.8.10     
 @react-navigation/stack                  ^5.7.1  →  ^5.12.8     
 @types/react                           ^16.9.43  →  ^17.0.0     
 amazon-cognito-identity-js               ^3.3.3  →   ^4.5.5     
 aws-amplify                             ^3.0.21  →  ^3.3.10     
 axios                                   ^0.19.2  →  ^0.21.0     
 graphql                                 ^0.11.7  →  ^15.4.0     
 graphql-tag                             ^2.10.4  →  ^2.11.0     
 moment-timezone                         ^0.5.31  →  ^0.5.32     
 react                                  ^16.11.0  →  ^17.0.1     
 react-native                            ^0.62.2  →  ^0.63.3     
 react-native-base64                       0.0.2  →    0.1.0     
 react-native-gesture-handler             ~1.5.0  →   ~1.9.0     
 react-native-reanimated                  ~1.4.0  →  ~1.13.2     
 react-native-safe-area-context           ^0.7.3  →   ^3.1.9     
 react-native-screens             2.0.0-alpha.12  →   2.15.0     
 react-native-simple-crypto              ^0.2.13  →  ^0.2.15     
 react-native-vector-icons                ^6.7.0  →   ^7.1.0     
 react-navigation                         ^4.4.0  →   ^4.4.3     
 @babel/core                               7.8.7  →   7.12.9     
 @babel/runtime                            7.8.7  →   7.12.5     
 babel-jest                               24.9.0  →   26.6.3     
 metro-react-native-babel-preset          0.56.4  →   0.64.0     
 react-test-renderer                      16.9.0  →   17.0.1

OK, I summarise from the error that react@^17.0.1 is wrong for react-native@0.63.3 which requires react@16.13.1 but this was produced by npx npm-check-updates -u - why it makes incompatible deps tree?..

If I change manually react version to "^16.0.0", npm install fails with:

npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR!   react@"^16.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from react-native@0.63.3
npm ERR! node_modules/react-native
npm ERR!   react-native@"^0.63.3" from the root project

Why "react@16.14.0"?! From where?

I just can't understand how all this s..tuff works.. Please, suggest.

My current package.json:

{
  "name": "Proj",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^5.9.9",
    "@react-navigation/drawer": "^5.11.4",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "@types/react": "^17.0.0",
    "amazon-cognito-identity-js": "^4.5.5",
    "aws-amplify": "^3.3.10",
    "axios": "^0.21.0",
    "graphql": "^15.4.0",
    "graphql-tag": "^2.11.0",
    "i18n-js": "^3.8.0",
    "moment-timezone": "^0.5.32",
    "react": "^16.0.0",
    "react-native": "^0.63.3",
    "react-native-avatar-social": "0.0.3",
    "react-native-base64": "0.1.0",
    "react-native-gesture-handler": "~1.9.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^2.0.1",
    "react-native-reanimated": "~1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "2.15.0",
    "react-native-simple-crypto": "^0.2.15",
    "react-native-tab-view": "^2.15.2",
    "react-native-tab-view-viewpager-adapter": "^1.1.0",
    "react-native-uuid-generator": "^6.1.1",
    "react-native-vector-icons": "^7.1.0",
    "react-native-video": "^4.4.5",
    "react-native-viewpager": "^0.2.13",
    "react-native-zeroconf": "github:atlascoder/react-native-zeroconf",
    "react-navigation": "^4.4.3",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.9",
    "@babel/runtime": "7.12.5",
    "babel-jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

UPDATE

Following @anthony-marino suggestion I made manual dependencies update by update helper, and the I returned to the issue that moved my to upgrade!!

npm ERR! Found: react@16.13.1
npm ERR! node_modules/react
npm ERR!   react@"16.13.1" from the root project
npm ERR!   peer react@"^16.0" from @react-native-community/viewpager@4.2.1
npm ERR!   node_modules/@react-native-community/viewpager
npm ERR!     peer @react-native-community/viewpager@"*" from react-native-tab-view-viewpager-adapter@1.1.0
npm ERR!     node_modules/react-native-tab-view-viewpager-adapter
npm ERR!       react-native-tab-view-viewpager-adapter@"^1.1.0" from the root project
npm ERR!   15 more (@react-navigation/core, @react-navigation/drawer, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.11.0" from react-native-zeroconf@0.12.3
npm ERR! node_modules/react-native-zeroconf
npm ERR!   react-native-zeroconf@"github:atlascoder/react-native-zeroconf" from the root project
npm ERR!

And the thing that runs me out..

I have a component from @react-native-community/viewpager and why if it requires peerDep react@"^16.0" - why it doesn't accept react@16.13.1. The ^16.0 means all fresher that 16.*, doesn't it?! When I check ^16.0 on npm semver calculator - it shows me 16.13.1 as suitable..

WORKAROUND

On trapping to this trouble while update:

  1. Delete node_modules and package-lock.json
  2. npm i
  3. When npm i fails - remove failing dependencies
  4. After completion of npm i - manually install removed dependencies
npm react-native
4 Answers

From your logs: react-native 0.63.3 needs react@"16.13.1", but found react@"^17.0.1". Just downgrade your react via npm install react@16.13.1 and try npm install again. It should work without errors. If you run npm outdated you'll see that "react" is outdated. But it's unlikely that you're going to have all your packages in the latest version.

user_6748660

so I've also run into this problem when I migrated from RN 0.63.1 to 0.64.1 so I solved it in this way:

  1. Step run npx react-native upgrade for me it updated react and react-native
  2. Then I've updated these dependencies mannually:
"@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"

you could use this tool to see what changes did these command npx react-native upgrade and what changes you have to do it manualy https://react-native-community.github.io/upgrade-helper/?from=0.63.1&to=0.64.1

  1. Then run npm install --force to update package-lock.json with new dependency that you've added manually. If you have tests with Jest probably then you have to adjust a few things as well go to jest.configs.js and make sure you have here react-native and @react-native as well
transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community)',
  ],

and probably you'll have some problem with these mock as well

// The old way
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
// Here path was updated
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

Now you should be good to go, this example was for upgrading RN from 0.63.1 to 0.64.1 but it could work for you as well.

p.s I'm using node -v 14.15.4 and npm -v 7.7.6 you may have less problem if you're using npm v6

user_97419610

This solved my problem.

npm install @react-native-community/masked-view --force

user_100634630

I had to use :

npm i --legacy-peer-deps

user_146067990
Related