Error while upgrading EXPO version from SDK 42 to 44 - react-native

I just tried to upgrade my expo app from SDK version 42 to version 44. I did the following commands:
npm i -g expo-cli
expo upgrade
When I try to run npm install i get this:
The expo package was found in your package.json but we couldn't resolve the Expo SDK version. Run npm install and then try this command again.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: expo-standard-web-crypto#1.2.0
npm ERR! Found: expo-random#12.1.2
npm ERR! node_modules/expo-random
npm ERR! expo-random#"~12.1.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional expo-random#"12.1.0" from expo-standard-web-crypto#1.2.0
npm ERR! node_modules/expo-standard-web-crypto
npm ERR! expo-standard-web-crypto#"^1.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: expo-random#12.1.0
npm ERR! node_modules/expo-random
npm ERR! peerOptional expo-random#"12.1.0" from expo-standard-web-crypto#1.2.0
npm ERR! node_modules/expo-standard-web-crypto
npm ERR! expo-standard-web-crypto#"^1.1.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.
npm ERR!
npm ERR! See /Users/michaelschmitz/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/michaelschmitz/.npm/_logs/2022-02-21T19_18_50_348Z-debug.log
I've never updated expo before and am unfamiliar with working with dependencies and package.jsons
here is my package.json as well:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"update-deps": "npm install -g npm && npm install -g expo-cli && npm install",
"build-ios": "expo bi --release-channel beta -t archive",
"build-android": "expo ba --release-channel beta -t app-bundle"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-community/slider": "4.1.12",
"#react-native-community/viewpager": "5.0.11",
"#react-native-masked-view/masked-view": "0.2.6",
"#react-navigation/drawer": "^5.12.9",
"#react-navigation/native": "^5.9.8",
"#react-navigation/stack": "^5.14.9",
"base-64": "^1.0.0",
"create-react-class": "^15.7.0",
"expo": "^44.0.0",
"expo-asset": "~8.4.6",
"expo-constants": "~13.0.1",
"expo-file-system": "~13.1.4",
"expo-font": "~10.0.4",
"expo-linking": "~3.0.0",
"expo-mail-composer": "~11.1.0",
"expo-notifications": "~0.14.0",
"expo-print": "~11.1.0",
"expo-sharing": "~10.1.0",
"expo-splash-screen": "~0.14.1",
"expo-sqlite": "~10.1.0",
"expo-standard-web-crypto": "^1.1.0",
"expo-status-bar": "~1.2.0",
"expo-web-browser": "~10.1.0",
"moment": "^2.29.1",
"native-base": "^2.13.15",
"pdf-lib": "^1.16.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-actionsheet": "^2.4.2",
"react-native-chart-kit": "^5.6.1",
"react-native-datepicker": "^1.7.2",
"react-native-elements": "^2.3.2",
"react-native-gesture-handler": "~2.1.0",
"react-native-modal": "^11.10.0",
"react-native-modal-picker": "^0.0.16",
"react-native-paper": "^4.9.2",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-simple-time-picker": "^0.2.0",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"utf8": "^3.0.0",
"uuid": "^8.3.2",
"expo-random": "~12.1.1",
"expo-updates": "~0.11.6"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-dom": "~17.0.9",
"#types/react-native": "~0.64.12",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "^4.29.3",
"#typescript-eslint/parser": "^4.29.3",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-react-native": "^3.11.0",
"jest-expo": "^44.0.0",
"typescript": "~4.3.5"
},
"private": true
}
This is in a react-native app and I was previously using version 42.

From your error you should revert back to your last working Expo 42 commit. Then do the following
npm uninstall expo-random
expo install expo-standard-web-crypto
The first will remove any direct dependency to expo-random from your package.json.
The second will reinstall expo-standard-web-crypto to the currently supported version for Expo 42.
Do you your test and commit if it works.
Then retry the update.
General process
The general process I have when doing an upgrade is:
determine what direct dependencies are not needed by the app and uninstall them or move them to devDependencies if it should've been a dev dependency like jest, #types etc.
test to make sure app still works
attempt upgrade
note the errors and deal with the problematic dependencies
dealing with the problematic dependency may simply be updating the version of the dep, or
revendor the improper dependencies yourself since it may take months for any fix to go through upstream,
change your code so you don't use it because the upstream may no longer be maintained except by renovate bots

Related

error when trying to install any package with the npm command

this error appears when trying to install any package. The current version of npm is 8.19.2 , windows 11 and node 19.0.0
package.json
"dependencies": {
"#headlessui/vue": "^1.7.3",
"#heroicons/vue": "^2.0.12",
"#meforma/vue-toaster": "^1.3.0",
"#tailwindcss/forms": "^0.5.3",
"#vue-hero-icons/outline": "^1.7.2",
"#vue-hero-icons/solid": "^1.7.2",
"#vuepic/vue-datepicker": "^3.5.2",
"#vueuse/core": "^9.4.0",
"blitzar": "^1.2.2",
"vue": "^3.2.41",
"vue-axios": "^3.5.1",
"vue-doc-preview": "^0.3.2",
"vue-toasted": "^1.1.28",
"vuejs3-datepicker": "^1.0.12",
"vuex": "^4.1.0"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.2.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.18",
"stylelint-config-recommended": "^9.0.0",
"tailwindcss": "^3.2.1",
"vite": "^3.2.2"
}
npm i npmrc
npm ERR! code E404
npm ERR! 404 Not Found - GET https://skimdb.npmjs.com/registry/npmrc/-/npmrc-1.1.1.tgz - not_found
npm ERR! 404
npm ERR! 404 'npmrc#https://skimdb.npmjs.com/registry/npmrc/-/npmrc-1.1.1.tgz' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm cache clean --force
npm install --force
ncu -u
> All dependencies match the latest package versions :)

"expo start --web" suddenly failing with "Body must be a string. Received: undefined"

I have just recently started with React Native and expo.
After completing a test app in the local web/dev server, I have been able to get it to work on an Android phone over a USB connection. But now the previously working web/dev server is failing:
> expo start --web
Starting project at C:\...\testproject
Body must be a string. Received: undefined.
Error: Body must be a string. Received: undefined.
at devAssert (C:\...\testproject\node_modules\graphql\jsutils\devAssert.js:12:11)
at new Source (C:\...\testproject\node_modules\graphql\language\source.js:37:56)
at new Parser (C:\...\testproject\node_modules\graphql\language\parser.js:86:62)
at Object.parse (C:\...\testproject\node_modules\graphql\language\parser.js:30:16)
at Object.<anonymous> (C:\...\testproject\node_modules\graphql-tools\src\stitching\introspectSchema.ts:7:48)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! testproject#1.0.0 dev:web: `expo start --web`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the testproject#1.0.0 dev:web script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
The expo build:web command is still working though. It exports a fully functional web app to the web-build directory.
Dependencies:
"dependencies": {
"expo": "^45.0.6",
"expo-gl": "^11.3.0",
"expo-keep-awake": "^10.1.1",
"expo-navigation-bar": "^1.2.0",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "^1.3.0",
"expo-three": "^6.1.0",
"expo-web-browser": "~10.2.1",
"react": "17.0.2",
"react-dom": "^18.2.0",
"react-native": "0.68.2",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.13.1",
"react-native-web": "^0.18.1",
"three": "^0.141.0"
},
"devDependencies": {
"#babel/core": "^7.18.5",
"#expo/webpack-config": "^0.16.24",
"#types/babel__core": "^7.1.19",
"#types/babel__template": "^7.4.1",
"#types/react": "~18.0.14",
"#types/react-native": "^0.69.0",
"#types/three": "^0.141.0",
"#typescript-eslint/eslint-plugin": "^5.29.0",
"#typescript-eslint/parser": "^5.29.0",
"eas-cli": "^0.54.1",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"expo-cli": "^5.4.11",
"expo-dev-client": "^1.0.0",
"husky": "^8.0.0",
"prettier": "^2.7.1",
"typescript": "~4.7.4"
}
Problem solved.
expo start -c -w (with -c to clear the cache) revealed the problem.
Apparently a dependency update had gone wrong; React is at 17, and React-DOM and the types are at 18. Upgrading all to 18 resulted in new/different errors, so I have now downgraded all to 17 and the dev server is working again.
for me, I had expo-cli as a dependency, as soon as I removed this, the message went away
I had expo-cli(v5.4.7) as a dev dependency. Upgrading to v6.0.6 made it work for me

How to overcome ERESOLVE errors within EAS build for native-base and Expo?

I have got the following package.json file. Main purpose is to use Expo 44 with native-base (version ^3.0.0). I could not figure out why such an obvious combination does not work. (Could not find online for native-base, which Expo versions are recommended either.)
package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"dependencies": {
"#expo/samples": "2.1.1",
"#expo/vector-icons": "^12.0.0",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/datetimepicker": "4.0.0",
"#react-native-community/netinfo": "7.1.3",
"#react-native-picker/picker": "2.2.1",
"expo": "^44.0.0",
"expo-ads-admob": "~12.0.0",
"expo-app-loading": "~1.3.0",
"expo-apple-authentication": "~4.1.0",
"expo-application": "~4.0.1",
"expo-asset": "~8.4.5",
"expo-auth-session": "~3.5.0",
"expo-av": "~10.2.0",
"expo-facebook": "~12.1.0",
"expo-font": "~10.0.4",
"expo-haptics": "~11.1.0",
"expo-image-manipulator": "~10.2.0",
"expo-random": "~12.1.1",
"expo-screen-orientation": "~4.1.1",
"expo-sharing": "~10.1.0",
"expo-tracking-transparency": "~2.1.0",
"moment": "^2.24.0",
"native-base": "^3.0.0",
"react": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "~2.1.0",
"react-native-modal-datetime-picker": "^8.6.0",
"react-native-picker-select": "^8.0.0",
"react-native-progress": "^4.1.2",
"react-native-progress-circle": "^2.1.0",
"react-native-safe-area-context": "3.3.2",
"react-native-svg": "12.1.1",
"react-native-view-shot": "3.1.2",
"react-native-webview": "11.15.0",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "9.0.1"
},
"resolutions": {},
"private": true
}
Even though all the local debugging and simulator runs work without problem, when the EAS try to build, following errors (coming from npm) are seen.
[stderr] npm ERR! code ERESOLVE
[stderr] npm
[stderr] ERR! ERESOLVE unable to resolve dependency tree
[stderr] npm ERR!
[stderr] npm ERR! While resolving: undefined#undefined
[stderr] npm ERR! Found: react#17.0.1
[stderr] npm ERR! node_modules/react
[stderr] npm ERR!
[stderr] react#"17.0.1" from the root project
[stderr] npm ERR! peer react#"*" from native-base#3.3.6
[stderr] npm ERR! node_modules/native-base
[stderr] npm ERR! native-base#"^3.0.0" from the root project
[stderr] npm ERR!
[stderr] npm ERR! Could not resolve dependency:
[stderr] npm ERR! peer react#"17.0.2" from react-dom#17.0.2
[stderr] npm ERR! node_modules/react-dom
[stderr] npm ERR! peer react-dom#"*" from native-base#3.3.6
[stderr] npm ERR! node_modules/native-base
[stderr] npm ERR! native-base#"^3.0.0" from the root project
[stderr] npm ERR!
[stderr] npm ERR! Fix the upstream dependency conflict, or retry
[stderr] npm ERR! this command with --force, or --legacy-peer-deps
[stderr] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[stderr] npm ERR!
[stderr] npm ERR! See /Users/expo/.npm/eresolve-report.txt for a full report.
[stderr]
[stderr] npm ERR! A complete log of this run can be found in:
[stderr] npm ERR! /Users/expo/.npm/_logs/2022-02-14T09_22_49_729Z-debug.log
npm exited with non-zero code: 1
How to overcome this problem, any ideas?
Chronology:
native-base was added into the project back in 2019, with "^2.10.0" version.
When upgrading to "expo": "^44.0.0" it required the native-base to be upgraded also, around 2021-12.
At 2021-12, native-base is upgraded to "native-base": "^3.0.0"
It was working up until recently, including EAS builds.
Just recently, after 2022-02-12, for some other purposes we updated our code, nuked the node_modules and we were republishing via EAS build and submit. But even though the "native-base": "^3.0.0" entry in the package.json did not change, the npm step in the EAS servers started to fail.
Other Info:
which build of the expo is failing android or ios.
ios
commands you are using to build.
eas build --platform ios --non-interactive
which package manager are you in this project ? yarn or npm.
I use yarn but eas build seems using npm
any other things which will be useful to replicate this error.
Unfortunately I don't have any other clue.
I also had similar problem.
I solved it by adding a line in package.json file.
"scripts": {
"eas-build-pre-install": "npm install --save --legacy-peer-deps"
}
It seems native-base searches "react-dom": "*" and could not find it so somehow uses "react-dom": "17.0.2" and it in turn looks for "react": "17.0.2" which conflicts with expo's "react": "17.0.1".
So adding "react-dom": "17.0.1" as dependency solved the problem. By this way "react-dom": "*" finds "react-dom": "17.0.1" which is dependent to Expo's version "react": "17.0.1". (Please let me know if this conclusion is wrong.)
Following are the ones related with native-base and these versions should be used otherwise the npm install fails for Expo 44:
"react-dom": "17.0.1",
"react-native-safe-area-context": "3.1.9",
"react-native-svg": "12.1.0",
Reference: https://github.com/GeekyAnts/NativeBase/issues/4647
As a temporary solution, you can add .npmrc file in your project directory with legacy-peer-deps=true and commit it. But at the end, you have to fix your dependencies.

Can't install "react-native-tab-view-collapsible-header"

When i try run the command on my terminal (pointed to the correct directory): "npm i react-native-tab-view-collapsible-header"
I get errors saying:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: projectname
npm ERR! Found: react-native-head-tab-view#4.0.0-rc.13
npm ERR! node_modules/react-native-head-tab-view
npm ERR! react-native-head-tab-view#"^4.0.0-rc.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-head-tab-view#"^4.0.0" from react-native-tab-view-collapsible-header#2.0.1
npm ERR! node_modules/react-native-tab-view-collapsible-header
npm ERR! react-native-tab-view-collapsible-header#"*" 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
Here is my package.js:
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/material-top-tabs": "^6.0.6",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"expo": "~43.0.2",
"expo-status-bar": "~1.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-head-tab-view": "^4.0.0-rc.13",
"react-native-pager-view": "5.4.6",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.9.0",
"react-native-tab-view": "^3.1.1",
"react-native-web": "0.17.1"
You'll need to use yarn add instead of npm install

react native upgrade library conflict

I am working with a react native project where the existing libraries is compiled to support Android level 29 but now it is mandatory to upgrade to level 30, so I am trying to upgrade the library by running npx react-native upgrade
info No version passed. Fetching latest...
(node:38396) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
info Fetching diff between v0.61.5 and v0.65.1...
info Applying diff...
warn Excluding files that exist in the template, but not in your project:
error Automatically applying diff failed. We did our best to automatically upgrade as many files as possible
warn Continuing after failure. Some of the files are upgraded but you will need to deal with conflicts manually
info Installing "react-native#0.65.1" and its peer dependencies...
error Command failed: npm install --save --save-exact react-native#0.65.1 react#17.0.2
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #react-native-community/async-storage#1.11.0
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#"*" from #react-native-community/checkbox#0.4.2
npm ERR! node_modules/#react-native-community/checkbox
npm ERR! #react-native-community/checkbox#"^0.4.2" from the root project
npm ERR! 16 more (#react-native-community/datetimepicker, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8" from #react-native-community/async-storage#1.11.0
npm ERR! node_modules/#react-native-community/async-storage
npm ERR! #react-native-community/async-storage#"^1.8.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#16.14.0
npm ERR! node_modules/react
npm ERR! peer react#"^16.8" from #react-native-community/async-storage#1.11.0
npm ERR! node_modules/#react-native-community/async-storage
npm ERR! #react-native-community/async-storage#"^1.8.1" 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.
I see ex. async-storage is causing the trouble here. I attach my package.json here, please guide me through the upgrade process?
"dependencies": {
"#react-native-community/async-storage": "^1.8.1",
"#react-native-community/checkbox": "^0.4.2",
"#react-native-community/datetimepicker": "^2.4.3",
"#react-native-community/masked-view": "^0.1.7",
"#react-native-firebase/app": "^8.1.0",
"#react-native-firebase/messaging": "^7.4.1",
"#react-navigation/bottom-tabs": "^5.2.4",
"#react-navigation/native": "^5.1.0",
"#react-navigation/stack": "^5.2.1",
"base-64": "^0.1.0",
"es6-shim": "^0.35.5",
"events": "^3.2.0",
"i18n-js": "^3.5.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-24h-timepicker": "^1.1.0",
"react-native-common-date-picker": "^2.3.1",
"react-native-date-picker": "^3.2.5",
"react-native-document-picker": "^4.0.0",
"react-native-elements": "^1.2.7",
"react-native-file-type": "0.0.8",
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.6.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.3.4",
"react-native-popup-menu": "^0.15.7",
"react-native-push-notification": "^4.0.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.3.0",
"react-native-snap-carousel": "^3.8.4",
"react-native-svg": "^12.0.3",
"react-native-svg-charts": "^5.3.0",
"react-native-swipe-list-view": "^3.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-view-overflow": "0.0.5",
"react-relay": "^9.1.0",
"relay-runtime": "^9.1.0",
"rn-apple-healthkit": "^0.8.0",
"rn-fetch-blob": "^0.12.0",
"styled-components": "^5.1.1",
"twilio": "^3.48.1",
"twilio-chat": "^4.0.0"
},
my target lib for react native is the latest, but of course any lower version that make android level 30 will work
"dependencies": {
"react": "17.0.2",
"react-native": "0.65.1"
},