react-native fails on bundling - react-native

I hope you can help me with an issue I encountered today and I am totally lost at the moment. I have a react-native project going and yesterday everything was working just fine, but today I was trying to start up the bundler, simulator and so on, but got a strange error instead that leaves me totally in the wild with no real clue where to get into this.
Error message
error: bundling failed: SyntaxError: Unexpected token, expected { (52:36)
at Parser.pp$5.raise (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:1761:8)
at Parser.pp.expect (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:1749:33)
at Parser.pp$1.parseClassBody (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:2436:8)
at Parser.pp$1.parseClass (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:2406:8)
at Parser.pp$1.parseStatement (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:1843:19)
at Parser.pp$1.parseBlockBody (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseTopLevel (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:1778:8)
at Parser.parse (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:1673:17)
at Object.parse (/Users/michel.engelen/...<patchToProject>.../node_modules/babylon/lib/index.js:7305:37) [/Users/michel.engelen/...<patchToProject>.../node_modules/react-native/Libraries/Components/Button.js]
This message pops up in the terminal when entering npm start -- --reset-cache and react-native run-ios afterwards.
Project settings / packages installed
Here are my dependencies inside the package.json:
"dependencies": {
"npm": "6.3.0",
"prop-types": "15.6.2",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-fontawesome": "5.7.0",
"react-native-remote-svg": "1.2.0",
"react-native-splash-screen": "3.1.1",
"react-navigation": "2.11.2",
"react-redux": "5.0.7",
"redux": "3.7.2",
"redux-thunk": "2.3.0",
"redux-undo": "1.0.0-beta9-9-7"
},
"devDependencies": {
"#babel/core": "7.0.0-beta.56",
"babel-plugin-add-module-exports": "0.2.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-react-native": "4.0.0",
"eslint": "5.3.0",
"eslint-config-google": "0.9.1",
"eslint-plugin-import": "2.13.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "7.10.0",
"eslint-plugin-react-native": "3.2.1",
"redux-devtools-extension": "2.13.5"
},
I did not specify ranges on them because that nearly always resulted in strange errors with other bundling issues (not this time though).
efforts to solve this (`til now)
rm -rf node_modules/ package-lock.json
upgrading the packages
removing jest from the dependencies
rm -rf ios/ android/ && react-native eject
reset the branch to a commit in the past that was working for sure
I even used yarn instead of npm during all of these steps to see if it has any impact on the outcome
I even tried to reboot the MacBook, but nothing worked up until now.
I seriously hope that somebody can help me with this, because otherwise I would probably have to redo everything, which would take me a lot of time.

Related

Laravel and Vue3 upgrade issues with the vue-template-compiler

I am trying to upgrade from Vue2 to Vue3 but getting errors.
I have installed vue3 latest version, installed #vue/compiler-sfc and tried to remove vue-template-compiler but when I do npm run dev keeps getting below error, I have gone through lots of SO posts but still getting this error.
Vue3 doesn't need vue-template-compiler but why I am still getting below error. Could anyone help please? Thanks!
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse(...\node_modules\#vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports(...\node_modules\vue-loader\lib\index.js:67:22)
My package.json file looks like this:
"devDependencies": {
"#types/jquery": "^3.5.5",
"#vue/compiler-sfc": "^3.1.2",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"cross-env": "^7.0.3",
"jquery": "^3.6",
"laravel-mix": "^6.0.19",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.3.0",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.13",
"sass-loader": "^7.1.0",
"ts-loader": "^9.2.2",
"typescript": "^4.3.2",
"vue": "^3.1.2",
"vue-loader": "^15.9.7",
"webpack": "^5.39.1"
},
"dependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#fortawesome/fontawesome-free": "5.*",
"#popperjs/core": "^2.9.2",
"vue-router": "^4.0.10"
}
packages.json doesn't have vue-template-compiler. I have tried removing while node_modules folder and did npm install and npm run dev but these errors are still appearing.
Thanks
If anyone else facing this issue, I did below steps to solve this issue:
Upgraded vue-loader to version v16.1.2
Removed node_modules folder from the root directory
Removed package-lock.json from the root directory
Run npm install
npm run dev
Now files compiled successfully.
Hope its helpful.

npm run watch Error in Cannot read property of 'map' undefined

Problem:
Running the command npm run watch throws and error
54% building 35/41 modules 6 active /app/docroot/themes/custom/mytheme/node_modules/css-loader/index.js??ref--10-2!/app/docroot/themes/custom/mytheme/node_modules/postcss-loader/src/index.js??postcss5!/app/docroot/themes
ERROR Failed to compile with 1 errors 1:25:50 AM
error
Cannot read property 'map' of undefined
15 assets
ERROR in Cannot read property 'map' of undefined
[Browsersync] Proxying: https://ps.lndo.site
The Error happens only when the following code is included in my webpack.mix.js file:
mix.imagemin({
patterns: [{
from: '**/*.{png,gif,jpg,jpeg,svg}',
to: 'images/',
context: 'src/images/'
}, {
from: '**/*.{png,gif,jpg,jpeg,svg}',
to: 'images/',
context: 'src/components/'
}]
});
Removing the above snippet removes the error but the previous developers on this project had this for a reason.
I recently updated due to security vulnerabilities and managed to debug a different issue that Copy Plugin introduced a breaking change (already updated in the code above). However I am unsure that I have all of the configuration correct.
This I have tried:
From the command line
rm -rf node_modules
rm package.lock
npm cache clean --force
npm install
These are the packages in package.json current as of August 27, 2020
"devDependencies": {
"bootstrap": "^4.3.1",
"browser-sync": "^2.26.12",
"browser-sync-webpack-plugin": "^2.2.2",
"copy-webpack-plugin": "^6.0.3",
"cross-env": "^7.0.2",
"husky": "^4.2.5",
"imagemin-webpack-plugin": "^2.4.2",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.4",
"laravel-mix-imagemin": "^1.0.3",
"popper.js": "^1.16.1",
"pretty-quick": "^2.0.1",
"resolve-url-loader": "^3.1.1",
"sass": "^1.26.10",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"throttle-debounce": "^2.3.0"
}
The packages updated were the following
"browser-sync": "^2.26.7",
"copy-webpack-plugin": "^5.1.1",
"husky": "^4.2.3",
"jquery": "^3.5.0",
"sass": "^1.26.3",
"throttle-debounce": "^2.1.0"
To me this looks like a bug in the laravel-mix-imagemin plugin. Its NPM page says that "The patterns parameter is automatically converted to an array". But this doesn't comply with the copy-webpack-plugin^6 you are using (which is used under the hood by laravel-mix-imagemin), as version 6 doesn't accept an array anymore. (Too bad the laravel-mix-imagemin plugin doesn't list its dependencies and their versions properly ...)
BTW: I had basically the same issue, and the error message you get is a catastrophe.
You might be having a problem respect of the version of webpack. This is the best guess I can make. If this code worked before, then this could be a possibility.
Did not find a great answer, for now just removed imagemin configuration from webpack mix. Fixes the compile issue but does not resolve my original question.

All my react-native projects shows error TypeError: cb.apply is not a function

I'm realtively new to react-native. All my projects were running fine in the morning, but somehow they stopped working. When I run react-native start and the react-native run-android, the app gets installed on the device but then this error props up which was not happening before.
Loading dependency graph, done.
DELTA [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)/home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285
if (cb) cb.apply(this, arguments)
^
TypeError: cb.apply is not a function
at /home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285:20
at FSReqCallback.oncomplete (fs.js:169:5)
I even cloned the repo from from scratch, but still the error persists. Please help out.
RN version: 0.59.2
My package.json file for one project,
{
"name": "projectalpha",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.11.0",
"axios": "^0.18.0",
"react": "16.8.3",
"react-native": "0.59.2",
"react-native-awesome-alerts": "^1.2.0",
"react-native-circle-checkbox": "^0.1.6",
"react-native-circular-progress": "^1.1.0",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-image-picker": "^0.28.1",
"react-native-maps": "react-native-community/react-native-maps#master",
"react-native-maps-directions": "^1.6.0",
"react-native-onesignal": "^3.2.12",
"react-native-reanimated": "^1.0.0-alpha.12",
"react-native-svg": "^9.4.0",
"react-native-svg-charts": "^5.2.0",
"react-native-swiper": "^1.5.14",
"react-native-tab-view": "^2.0.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.6.0",
"unstated": "^2.1.1"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.5.0",
"eslint": "^5.15.3",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
Ciao, this problem is connected to graceful-fs package. Plase, reinstall graceful-fs:
npm install graceful-fs --save-dev
And problem should be solved.
For me, npm cache clean —force was not working, and graceful-fs is not direct dependency in my project.
OS: Ubuntu
Node: 14.6.0
Npm: 6.14.7
I am still not sure why this error exits, but it works. I found this solution on Flavio Copes's post.
open file /node_modules/graceful-fs/polyfills.js, where the error comes from.
Here’s the function that gives the problem:
function statFix (orig) {
if (!orig) return orig
// Older versions of Node erroneously returned signed integers for
// uid + gid.
return function (target, cb) {
return orig.call(fs, target, function (er, stats) {
if (!stats) return cb.apply(this, arguments)
if (stats.uid < 0) stats.uid += 0x100000000
if (stats.gid < 0) stats.gid += 0x100000000
if (cb) cb.apply(this, arguments)
})
}
}
comment out these lines (line 62-64):
// fs.stat = statFix(fs.stat)
// fs.fstat = statFix(fs.fstat)
// fs.lstat = statFix(fs.lstat)
I've run into this problem while trying to start a react-native development server on one of my old projects - (React Native version 0.59.x). For me, the fix was downgrading the node version from 14 to 10 using nvm
Go to C:\Users(your username)\AppData\Roaming
Delete npm and npm-cache
Try running again if it gives the error again uninstall and delete Nodejs completely, check that those two files above are still nonexistent and then redownload Nodejs.
On one of my computers the first way worked no problems the second one needed to have Nodejs completely replaced and then worked.
here is the solution for it.
Option 1:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
You should be good now if not do option 2.
Option 2:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
Make sure everything to do with Nodejs is deleted and uninstalled.
Reinstall Nodejs.
You should be good now
I had to use node 12.3.1 and npm 6.9.0 to fix this error
nvm use 12.3.1
This installed both. npm install working again.

What does 'npm:' means?

I've started working on a project in my new workplace .
It's react project and has a package.json which has the dependencies like the one below.
"dependencies": {
"babel-polyfill": "^6.26.0",
"gsap": "^2.0.2",
"lodash": "^4.17.11",
"mobx": "^5.1.2",
"mobx-react": "^5.4.2",
"react": "^16.5.2",
"react-dom": "npm:#hot-loader/react-dom",
"react-draggable": "^3.0.5",
"react-hot-loader": "^4.8.3",
"react-id-swiper": "^1.6.9",
"react-resize-detector": "^4.0.5"
},
For react-dom, the version is specified as "npm:#hot-loader/react-dom".
What does 'npm:' means?
My coworker guess it's the way that only yarn uses.
I wonder about this naming as 'npm install' doesn't install react-dom, but 'yarn install' install it.
Thank you for your help!
I think this dependency is installed wrong it should be:
react-dom#npm:#hot-loader/react-dom
It's a yarn name resolution, so #hot-loader/react-dom would be installed instead of react-dom#npm

Cannot Find Module '#babel/core' react-native

Bundling index.js [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: Error: Cannot find module '#babel/core' (While processing preset:
Others have had similar problems which were solved by one of the following:
Uninstalling babel-preset-react-native and installing it again #2.1.0.
Some people could only fix this using yarn and not npm
Moving Babel to devDependancies
Updating the .babelrc file with
{
"presets": [
"react-native"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
Unfortunately, not a single one of these worked for me. This happened right after I installed "react-native-svg": "^6.4.1" and "react-native-svg-charts": "^5.2.0".
My package.json is
"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-svg": "^6.4.1",
"react-native-svg-charts": "^5.2.0",
"react-navigation": "^1.5.11",
"react-navigation-redux-helpers": "^1.0.5",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-persist": "^5.4.0"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.52",
"babel-jest": "23.2.0",
"babel-loader": "^7.1.5",
"gulp-babel": "^7.0.1",
"babel-preset-react-native": "2.1.0",
"jest": "23.3.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
I've tried a few other things as well, i've removed the node_modules directory about 150 times and reinstalled. always the same error. I've installed #babel/core and babel-core. I've changed the version numbers, i've moved them around from dependencies to devDependencies and back again. nothing is working.
When I do npm install - everything seems to install just fine
When I do react-native run-android it runs through the code, loads it onto the emulated device
Installing APK 'app-debug.apk' on 'Nexus_6_API_28(AVD) - 9' for app:debug
Installed on 1 device.
BUILD SUCCESSFUL
Total time: 10.373 secs
However, immediately after that, when it runs on the device I receive the red screen of death.
Bundling index.js [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: Error: Cannot find module '#babel/core' (While processing preset: "/Code/nr/node_modules/babel-preset-react-native/index.js")
Well, after a few hours it seems that at least one of the above DID work. the remaining issue was closing the Metro Bundler terminal and starting a new one. Thanks to a comment on the accepted answer from TransformError with babel-preset-react-native/index.js