Babel version error when react-native bundle - reactjs

When i try to run:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
I receive this error:
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "C:\\..\\AppDirectory\\node_modules\\#babel\\preset-env\\lib\\index.js")
I've tried removing node-modules directory, cleaning cache, npm install, etc, etc, etc. I've also tried installing Babel manually but the same issue persists.
I had the same error before when generating the .apk, but could solve it installing babel dependencies, now this doesn't work neither.
This is my package.json
{
"name": "Appname",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-test-renderer": "16.3.1",
"babel-preset-react-native-stage-0": "^1.0.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"dependencies": {
"#babel/core": "^7.0.0-beta.54",
"#babel/preset-env": "^7.0.0-beta.54",
"#babel/preset-react": "^7.0.0-beta.54",
"babel-core": "^6.26.3",
"babel-preset-react-native": "^2.1.0",
"babel-upgrade": "0.0.20",
"react": "16.3.1",
"react-native": "^0.55",
"react-native-circle-checkbox": "^0.1.6",
"react-native-modal": "^6.4.0",
"react-native-phone-call": "^1.0.7",
"react-navigation": "^2.6.2",
"react-redux": "^5.0.7",
"react-router-native": "^4.3.0",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
}
}
And this is my .babelrc file:
{
"presets": ["#babel/react"],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}

Related

Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type

This post relates to a rapidly changing event.
After running 'npm update' on my app, I am suddenly getting the following error:
Compiled with problems:
ERROR in ./node_modules/pako/lib/zlib/trees.js 257:106
Module parse failed: Unexpected token (257:106)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| * not null.
| */
> function gen_bitlen(s, desc) /* deflate_state *s;*/ /* tree_desc *desc; /* the tree descriptor */*/{
| var tree = desc.dyn_tree;
| var max_code = desc.max_code;
Strange. So I compared it to the same app running on a different workstation with the same code, but where I did not run 'npm update'. The app works, no surprise.
I've seen other posts with this error, but their solutions do not seem to apply to my environment.
I cannot figure out why it's not working on my main workstation. If I copy over node_modules from the working station, the app starts fine. But as soon as I remove node_modules and package-lock.json and reinstall, the app will not start. I've removed node_modules/package-lock.json/clear npm cache. Doesn't help.
I'm comparing the module versions via 'npm ls', and they are identical on both workstations.
Both are running NodeJS 8.12.0 and npm 8.19.2
I looked at the file that it's erroring out on (pako/lib/zlib/trees.js), and it's identical on both systems.
I have no idea what 'pako' is, but using 'npm explain pako' it appears to have something to do with pdf-lib, which was never updated.
My app was built with create-react-app.
I'm at a complete loss. Here is my package.json:
{
"name": "foo",
"version": "0.1.0",
"description": "Foo",
"contributors": [],
"license": "UNLICENSED",
"private": true,
"dependencies": {
"#coreui/chartjs": "^2.0.0",
"#coreui/coreui-pro": "^3.4.2",
"#coreui/icons": "^2.1.0",
"#coreui/icons-pro": "^2.0.3",
"#coreui/icons-react": "^1.1.0",
"#coreui/react": "^3.4.6",
"#coreui/react-chartjs": "^1.1.0",
"#coreui/utils": "^1.3.1",
"#fortawesome/fontawesome-free-solid": "^5.0.13",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#nadavshaar/react-grid-table": "^1.0.0",
"#pdf-lib/fontkit": "^1.1.1",
"#react-firebase/auth": "^0.2.10",
"ag-grid-community": "^25.3.0",
"ag-grid-react": "^25.3.0",
"arithmetic": "^1.0.1",
"bootstrap": "^5.2.0",
"classnames": "^2.3.1",
"codemirror": "^5.63.3",
"core-js": "^3.19.1",
"downloadjs": "^1.4.7",
"firebase": "^9.12.1",
"firebase-admin": "^11.0.1",
"firebaseui": "^6.0.1",
"formik": "^2.2.9",
"mobx": "^6.3.3",
"mobx-react": "^7.1.0",
"pdf-lib": "^1.17.1",
"prop-types": "^15.7.2",
"random-id": "^1.0.4",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-awesome-button": "^6.5.1",
"react-big-calendar": "^0.33.6",
"react-bootstrap": "^2.4.0",
"react-collapsible": "^2.10.0",
"react-cookie-consent": "^8.0.1",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^5.0.3",
"react-firebaseui": "^6.0.0",
"react-grid-layout": "^1.3.0",
"react-range": "^1.8.12",
"react-redux": "7.2.4",
"react-router-dom": "^5.3.0",
"react-select": "^4.3.1",
"react-text-mask-hoc": "^0.11.0",
"react-toastify": "^9.0.8",
"reactstrap": "^8.10.0",
"redux": "4.1.0",
"rpg-dice-roller": "1.6.0",
"sass": "^1.55.0",
"sillyname": "^0.1.0",
"spinkit": "2.0.1",
"string-math": "^1.2.2",
"styled-components": "^5.3.3",
"yup": "^0.32.11"
},
"devDependencies": {
"mutationobserver-shim": "^0.3.7",
"react-scripts": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject",
"zip": "git archive -o coreui-pro-react-admin-template-v$npm_package_version.zip -9 HEAD"
},
"bugs": {
"url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*index.js",
"!src/serviceWorker.js",
"!src/polyfill.js"
]
},
"engines": {
"node": ">=8.16",
"npm": ">=6"
}
}
I made a workaround. I compared my old and new package-lock.json of my projects and I saw some #babel lib version changed to v7.20.2 (on Nov 4th, 2022). I overwrote the new package-lock.json with old one and my react app built and ran successfully again.
I then changed (downgrade) some of #babel package in my package.json and it is solved the problem:
Put this lines into your package.json file:
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin":"7.19.0",
"#babel/helper-module-transforms":"7.19.6",
https://github.com/babel/babel/issues/15132
Babel fixed their issue. you can use the latest version and it should work now. (I verified it)
extending #Attila Szombathelyi's answer,
If you are using CRA, you can make use of resolutions in your package.json
{
"name": "app-name",
"version": "1.0.0",
"dependencies": {
...
},
...
"resolutions": {
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6",
"babel-loader": "8.2.5"
}
}
Solution in my case was to disable babel dependencies transpilation (which was enabled in our project).
How I did it? In my project vue-cli is used. So I have disabed transpileDependecies option in vue.config.js
If you are using a bare webpack you may also find appropriate solution for it or any other build system.
Workaround: As of npm 8.3.0, you can also use npm's
overrides in package.json. Delete package-lock.json and node_modules folder (recommended).
"overrides": {
"#babel/core": "7.19.6",
"#babel/generator": "7.19.6",
"#babel/compat-data": "7.19.4",
"#babel/helper-compilation-targets": "7.19.3",
"#babel/helper-create-class-features-plugin": "7.19.0",
"#babel/helper-module-transforms": "7.19.6"
}

Property 'require' doesn't exist react native metro bundler

This issue has to do with the metro bundler not being able to bundle the JS to the device. I run npm run start and it shows fine on the browser (i.e. 'I browse to http://localhost:8081) However, when I load npm run ios it fails with the following:
error Image
Also, I had a previously working project and then imported another project with this issue and is now causing the working project to fail.
I have tried changing the port and resetting the cache but device cannot find the url to bundle.
this problem isn't device specific as I get the same issue on android
I have tried deleting node modules and running npm install
any help?
{
"name": "venueApp",
"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 . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-private-methods": "^7.18.6",
"#testing-library/react-native": "^11.2.0",
"babel-loader": "^8.2.5",
"formik": "^2.2.9",
"jest": "^29.1.1",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-safe-area-context": "^4.4.0",
"react-native-vector-icons": "^9.2.0"
},
"devDependencies": {
"#babel/core": "^7.19.3",
"#babel/preset-env": "^7.19.3",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "^26.0.23",
"#types/react-native": "^0.70.0",
"#types/react-native-vector-icons": "^6.4.12",
"#types/react-test-renderer": "^18.0.0",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"metro": "^0.72.3",
"metro-core": "^0.72.3",
"metro-react-native-babel-preset": "^0.72.1",
"react-native-mock": "^0.3.1",
"react-test-renderer": "18.1.0",
"typescript": "^4.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native(-.*)?|#react-native(-vector-icons)?)/)"
]
}
}
Update:
What I have discovered is that the index.bundle file is different to that of the working project so not sure why metro is picking up a different file.
I had a similar issue.
I have no idea what fixed it but I had made changes to these files.
.watchmanconfig
babel.config.js
metro.config.js
I've since reverted the changes and it came back to life, but it could have been a combination of things including clearing gradle and removing node_modules etc.
Hopefully this will help you narrow down the problem.
any news? this bug doesn't seem related to react native, it fixes itself sometimes on mac reboot in my case! react-native 0.71.0.
I think it's a babel problem.
I posted the image of the metro bundle where there is the error! at:
var _typeof = require("#babel/runtime/helpers/typeof");

Unable to use webrtc in react native

I am trying to use webrtc in my react native app but whenever i install my app , it closes automatically this starts happening after I installed the react-native-webrtc package in my app ,before that my app was working
here's my package.json
{
"name": "demoApp",
"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 ."
},
"dependencies": {
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-webrtc": "^1.75.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/runtime": "^7.9.2",
"#react-native-community/eslint-config": "^1.0.0",
"babel-jest": "^25.2.6",
"eslint": "^6.8.0",
"jest": "^25.2.7",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I even tried 1.75.1 and 1.75.0 version of react-native-webrtc but still Same Issue
After install react-native-webrtc package,
you have to follow this guide.
Simply add this in your gradle.properties:
android.enableDexingArtifactTransform.desugaring=false
and enjoy!

Parcel + Babel not transpiling ES6 from node_modules?

I can't seem to get Babel to work with Parcel, although the presets are being installed automatically. It works locally and in Chrome, but it's not transpiling node_modules es6 files, so the output still has const/let/... and it cannot run in Safari.
.babelrc
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
(I've also tried the env and react ones).
package.json scripts
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
Why would this be?
Full package.json (note this is after messing around in order to try to get it working)
{
"name": "my-react-app",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.1.5",
"#babel/preset-env": "^7.1.5",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"browserslist": "^4.3.4",
"lodash": "^4.17.11",
"node-sass": "^4.10.0",
"pinyin": "^2.8.3",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-notifications": "^1.4.3",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"cssnano": "^4.1.7",
"sass": "^1.14.3"
}
}
Still getting .js files with const, let. Any ideas what I am missing?
I've found a solution to it from https://github.com/parcel-bundler/parcel/issues/1655#issuecomment-425593377
// .browserslistrc.packages
node 10.11
// package.json
{
"scripts": {
"postinstall": "npm-run-all -p \"postinstall:*\"",
"postinstall:p-retry": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/p-retry",
"postinstall:query-string": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/query-string"
}
}
Add a postinstall:package-name for every npm package that you need to add transpilation (in my case, pinyin) and run npm run postinstall after every npm install. Babel should now also transpile that npm package!

React native won't start

I'm new to React Native. I used the React Native Firebase starter kit and followed all the steps, but as soon as I want to start, it gets stuck at this screen:
Has anyone experienced this or know how to fix this?
UPDATE: When I run npm run iOS I get the following error:
Content of Package.json
{
"name": "ReactNativeStarter",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-install": "2.1.0",
"babel-jest": "^23.4.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"fs-extra": "^6.0.1",
"jest": "^23.4.0",
"react-test-renderer": "^16.4.1",
"replace-in-file": "^3.4.0"
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"rename": "node ./bin/rename.js",
"start": "react-native start",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"fbjs": "^0.8.17",
"react": "^16.3.2",
"react-native": "^0.56.0",
"react-native-firebase": "^4.3.6"
}
}
Content of .babelrc
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
Looks like Babel needs to be upgraded.
When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.
However, you are using babel-preset-react-native-stage-0 which does not seem to support React Native 0.56.0. See https://github.com/skevy/babel-preset-react-native-stage-0/issues/8
My advice would be to try using babel-preset-react-native until a fix for babel-preset-react-native-stage-0 is released.

Resources