React Native - Unable to resolve module `#babel/runtime/helpers/interopRequireDefault` - react-native

I upgraded my react native application from 0.48.3 to 0.59.8 everything works fine until lauching the emulator . Then this error appears :
error: bundling failed: Error: Unable to resolve module
`#babel/runtime/helpers/interopRequireDefault` from
`E:\als\variant\generic\index.android.js`: Module
`#babel/runtime/helpers/interopRequireDefault` does not exist in the
Haste module map
Here is my Package.json :
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#babel/runtime": "^7.0.0-beta.55",
"babel-loader": "^8.0.5",
"content-disposition": "^0.5.2",
"core-js": "^3.0.1",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-loader": "^2.4.5",
"react-native": "0.59.8",
"react-redux": "^5.0.6",
"react-router-dom": "^5.0.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"#babel/plugin-transform-block-scoping": "^7.0.0",
"#babel/plugin-transform-flow-strip-types": "^7.4.4",
"#babel/plugin-transform-react-jsx-source": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/preset-env": "^7.4.3",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-preset-react-native": "^5.0.2",
}
I have tried all solutions found in similar questions but not working .Have you any idea please ?

Try to reset cache with
npm run start --reset-cache

I faced this same issue and no solutions mentioned on the threads worked. However I was finally able to solve it by removing and re-installing the global version of react-native:
npm uninstall react-native -g
npm install react-native#latest -g
And the error then disappeared when I re-ran:
react-native start

Related

trying to get assembleRelease react-native

So far, I have not had any problems getting the output of the application, but now
I'm trying to get assembleRelease and show me this error:
> Task :app:lintVitalRelease FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:lintVitalRelease'.
> Could not resolve all artifacts for configuration ':react-native-screens:releaseRuntimeClasspath'.
> Could not resolve com.facebook.react:react-native:+.
Required by:
project :react-native-screens
> Failed to list versions for com.facebook.react:react-native.
> Unable to load Maven meta-data from https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml.
> Could not HEAD 'https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml'. Received status code 502 from server: Bad Gateway
this is my package.json:
"dependencies": {
"#react-native-async-storage/async-storage": "^1.15.14",
"#react-navigation/bottom-tabs": "^6.0.7",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"apisauce": "^2.1.1",
"i18next": "^21.5.3",
"link": "^0.1.5",
"react": "17.0.2",
"react-i18next": "^11.14.3",
"react-native": "^0.66.3",
"react-native-circular-progress": "^1.3.7",
"react-native-flash-message": "^0.2.0",
"react-native-localize": "^2.1.5",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.9.0",
"react-redux": "^7.2.6",
"react-router-native": "^6.0.2",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.3"
},
"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.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "17.0.2"
},
anybody can help me?
Bin tray is experiencing "intermittent issues" on their download network :
https://status.bintray.com/
Also if you are using obselete jCenter(), then replace it with mavenCentral() in your android/build.gradle

React Native version mismatch when upgrading from 59.5 from 60.4

After upgrading to the newer version of react native (60.4) following all instructions on https://react-native-community.github.io/upgrade-helper/
But still getting this error message:
console.error: "React Native version mismatch.
JavaScript version: 0.57.8
Native version: 0.60.4
Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with 'watchman watch-del-all && react-native start --reset-cache'.
Here's a screenshot
The point is that I was on version 0.59.5 before upgrading.
Already tried:
- Downgrading to 60.0
- Removing node_modules/
- Removing react-navigation (maybe it was using another version of RN, but it is on version 3.11.1 now)
- Another develop environment
- Deleting entire folder and cloning from remote
- implementation ("com.facebook.react:react-native:0.60.4") { force = true }
Here is my package.json dependencies:
"dependencies": {
"#react-native-community/async-storage": "^1.6.1",
"native-base": "^2.13.4",
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-animatable": "^1.3.0",
"react-native-camera": "^3.0.1",
"react-native-firebase": "^5.5.6",
"react-native-gesture-handler": "^1.3.0",
"react-native-masked-text": "^1.12.5",
"react-native-material-menu": "^0.6.6",
"react-native-push-notification": "^3.1.8",
"react-native-qrcode-scanner": "^1.2.1",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "3.11.1"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/runtime": "^7.5.5",
"#react-native-community/eslint-config": "^0.0.5",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"documentation": "12.1.1",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^13.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-native": "^3.7.0",
"flow-bin": "^0.98.0",
"jest": "^24.8.0",
"jetifier": "^1.6.3",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "16.8.6"
},
Node version: 12.8.0
Yarn version: 1.17.3
I was able to run after trying watchman watch-del-all && react-native start --reset-cache but all vector-icons were crashed and all firebase-analytics events resulted in app crashing.
Solution was creating a project using react-native init MyProject and them add the libraries in package.json, but react-native-vector-icons still need linking.
The only problem is that custom fonts doesn't seen to work at all!

TypeError: Cannot read property 'bindings' of null

i have a ready mobile app with react native #0.48.3 and inside it i am going to bundle a web app with webpack but i get this error when running webpack i guess it's a problem with versions but i can't find which one's is causing this error :
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo
here is my package.json file
"dependencies": {
"react": "16.0.0-alpha.12",
"react-dom": "16.0.0-alpha.12",
"react-native": "0.48.3",
},
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.0.0",
"#babel/plugin-transform-react-jsx-source": "^7.2.0",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^21.0.2",
"babel-loader": "^8.0.5",
"babel-plugin-transform-es2015-block-scoping": "^6.26.0",
"babel-preset-react-native": "5.0.1",
"jest": "21.1.0",
"metro-react-native-babel-preset": "^0.47.0",
"react-test-renderer": "16.0.0-alpha.12",
"regenerator-runtime": "^0.13.2",
"url-loader": "^1.1.2",
"webpack": "^4.28.4"
},
"jest": {
"preset": "react-native"
}
and here's my babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset","#babel/preset-
env"],
plugins: ["#babel/plugin-proposal-object-rest-spread","#babel/plugin-
transform-react-jsx-source","transform-es2015-block-scoping"]
};
update your package.json script, ensure you are using the #babel/env not --presets=env as in last version.
"scripts": {
"build": "babel ./src --out-dir ./build --presets=#babel/env",
}
This is the important part --presets=#babel/env

"Maximum call stack size exceeded" - npm install react-scripts#latest

We are experiencing issues upgrading to create-react-scripts 2.
I have no problem running npx create-react-app. App is created and runs fine.
In apps based on create-react-app, npm i react-scripts#latest generates:
npm ERR! Maximum call stack size exceeded npm ERR! A complete log of
this run can be found in: npm ERR!
C:\Users\me\AppData\Roaming\npm-cache_logs\2018-10-09T19_27_15_671Z-debug.log
In log file:
4092 http fetch GET 404 https://registry.npmjs.org/#xtuc%2flong 426ms
4093 silly fetchPackageMetaData error for #xtuc/long#4.2.1 404 Not
Found: #xtuc/long#4.2.1 4094 verbose stack RangeError: Maximum call
stack size exceeded
npm: 6.4.1
node: 8.12.0
Windows 10 (but also reproducible in Docker node:8.12.0)
This is the package.json with older react-scripts that works fine:
...
"dependencies": {
"#material-ui/core": "^3.0.2",
"#material-ui/icons": "^3.0.1",
"classnames": "^2.2.6",
"faker": "^4.1.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-markdown": "^3.4.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.0.4",
"react-syntax-highlighter": "^7.0.4",
"typeface-lato": "^0.0.54"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#babel/runtime": "^7.0.0",
"#material-ui/codemod": "^1.1.0",
"#types/webdriverio": "4.8.7",
"babel-plugin-istanbul": "^4.1.6",
"chromedriver": "2.35",
"commander": "^2.15.1",
"copyfiles": "^1.2.0",
"cross-env": "^5.2.0",
"cucumber": "^3.1.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.4.0",
"eslint": "^5.5.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-nibble": "^4.2.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^21.22.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-webdriverio": "^1.0.1",
"gherkin-lint": "^2.11.1",
"jest-junit": "^3.7.0",
"markdownlint": "^0.10.0",
"markdownlint-cli": "^0.10.0",
"mkdirp": "^0.5.1",
"prettier-eslint": "^8.8.2",
"prettier-eslint-cli": "^4.7.1",
"react-test-renderer": "^16.4.1",
"replace-in-file": "^3.4.0",
"rimraf": "^2.6.2",
"selenium-webdriver": "3.6",
"should": "^13.1.0",
"wdio-cucumber-framework": "1.0.2",
"wdio-junit-reporter": "^0.4.4",
"wdio-selenium-standalone-service": "0.0.9",
"wdio-spec-reporter": "0.1.2",
"webdriverio": "^4.13.1"
}
}
Changing package.json to read "react-scripts": "^2.0.4" and then npm i or running npm i react-scripts#latest both fail.
Any help would be greatly appreciated.

React native upgrade from babel 6 to babel 7

What would be the steps to upgrade from babel 6 to babel 7 an existing react-native project?
These are the old dependencies:
"dependencies": {
.........
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"prop-types": "^15.5.10",
"react": "16.3.1",
"react-native": "0.55.4",
"react-redux": "5.0.7",
"redux": "^4.0.0",
"redux-actions": "^2.6.1",
"redux-mock-store": "^1.5.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.1.0",
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "^7.4.0",
"gulp": "^3.9.0",
"gulp-eslint": "4.0.2",
"gulp-mocha": "6.0.0",
"jest": "^23.5.0",
.....
},
What steps do you have to follow to make this update?
How should the new dependencies looks like?
It is not very clear for me (after reading the babel doc) what I should do to make this upgrade, commands to run and what should be added in dependencies and what in devDependencies.
Also it is not very clear for me what is the difference between babel 6 and babel 7 regarding what is happening with the JS code in a react-native project.
Please don't respond with just links to babel doc or to react-native 0.57 change log.
I would need at least some basic steps to do this upgrade and an example of a package.json of a RN project based on babel 7.
Short answer:
run npx babel-upgrade
(then you can take a look in package.json to check what changed)
Long answer:
For RN 0.57.x after reading the babel and babel-upgrade docs I realized it was enough to have all the old babel dependencies inside devDependencies for my project:
"dependencies": {
.........
"react": "16.3.1",
"react-native": "0.55.4",
},
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"react-native": "0.55.4",
"babel-eslint": "^8.2.2",
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
},
1) I used npx and babel-upgrade (npx is already included in npm versions >= 5.2.0)
If you have older npm versions you have to install npx globally.
npx lets you run babel-upgrade without installing it locally.
2) I ran npx babel-upgrade ( without the --write option) to see how the upgrade will affect my package.json deps)
3) I ran npx babel-upgrade --write
4) I set RN version to 0.57.1 and changed the babel-preset dependency from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "^0.45.0",and .babelrc configuration to:
{
"presets": ["module:metro-react-native-babel-preset"]
}
as written in the RN change log instructions.
Now package.json looks like this:
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.1",
.......
}
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-do-expressions": "^7.0.0",
"#babel/plugin-proposal-export-default-from": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-bind": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.0.0",
"#babel/plugin-proposal-pipeline-operator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-object-rest-spread": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-flow": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-preset-react-native-stage-0": "^1.0.1",
.....
}
I am not sure if all the new dependencies added by gradle-upgrade are needed but the project builds and runs ok for both android and ios.
If you find a better solution or improvements for this babel update please add a comment or add a new answer, I will be happy to update my answer or accept a new better one.
Sources:
https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#057
https://github.com/babel/babel-upgrade
For RN 0.58.6 I noticed I do not need so many babel deps. I noticed this creating a new project with a react-native init command.
My package.json file looks now like this:
{
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.6",
// ....
},
"devDependencies": {
"#babel/core": "^7.0.0-0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.53.0",
"react-test-renderer": "16.6.3",
// ....
},
"jest": {
"preset": "react-native",
// ...
}
}
NOTE:
For IOS: I was able to build it in IOS without any react/react-native deps in pod file. I added/re-added those inside Linked Frameworks and Libraries section
Use babel-upgrade.
You can try using babel-upgrade in order to automatically upgrade your Babel dependencies.
It's very easy to use, even without installing it globally.
I recommend having a clean working directory (no unstaged changes) and simply run the following command:
npx babel-upgrade --write
This will update your package.json and your .babelrc files with the correct Babel versions and packages.
The --write command just tells the tool to save the changes to disk. That's why I suggested having a clean working directory so you can review the changes with git diff. If you omit --write it will just show the desired changes in the console.
You can see more information at https://github.com/babel/babel-upgrade.
For anyone having this problem in 2021 :
npm install --save-dev #babel/core #babel/cli