I face this error with my react-native project - react-native

error: bundling failed: Error: Unable to resolve module assert from path to my project\node_modules\#jest\console\build\BufferedConsole.js: Module assert does not exist in the Haste module map
I have tried to uninstall npm and reinstall it Again but this was useless
Could you advice why this happens and how could I solve this issue ?
Jest in package.json
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/runtime": "^7.6.2",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.3",
"rn-nodeify": "^10.1.0"
},
"jest": {
"preset": "react-native"
}
the error in metro bundler is
https://i.stack.imgur.com/mJvcT.png

That happens because the dependency is missing. First check if your package.json has the jest library. If everything looks correct, I'd suggest
Try removing the cache
react-native start --reset-cache
Delete your node_modules folder and
npm install
If none works, it could be babel issue (but not likely), try
npm add #babel/runtime
If that still doesn't work, I'd have to ask you to share more code. It's hard to guess what's causing the error without any context.

Related

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.

Module not found: Error: Can't resolve 'core-js/es6'

I've got a problem with my build process in relation to my React app.
I always get the following error:
Module not found: Error: Can't resolve 'core-js/es6'
if I use this in a polyfill.js:
import 'core-js/es6';
That is my package.json:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.4.2",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^5.0.2",
"css-hot-loader": "^1.4.4",
"eslint": "5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"react-hot-loader": "4.8.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^3.0.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-redux": "^6.0.1",
"react-string-replace": "^0.4.1",
"redux": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"scripts": {
"dev": "webpack-dev-server --hot",
"build": "webpack --colors --profile --progress --env.mode production",
"lint": "eslint ./src/ --ext .js,.jsx"
}
}
Can someone help here?
The imports have changed for core-js version 3.0.1 - for example
import 'core-js/es6/array';
and
import 'core-js/es7/array';
can now be provided simply by the following
import 'core-js/es/array';
if you would prefer not to bring in the whole of core-js
I found possible answer. You have core-js version 3.0, and this version doesn't have separate folders for ES6 and ES7; that's why the application cannot find correct paths.
To resolve this error, you can downgrade the core-js version to 2.5.7. This version produces correct catalogs structure, with separate ES6 and ES7 folders.
To downgrade the version, simply run:
npm i -S core-js#2.5.7
In my case, with Angular, this works ok.
Change all "es6" and "es7" to "es" in your polyfills.ts and polyfills.ts (Optional).
From: import 'core-js/es6/symbol';
To: import 'core-js/es/symbol';
After Migrated to New Angular Version or Version changed for core-js, core-js/es6 or core-js/es7 Will not work.
You have to simply replace import core-js/es/ in your polyfills.ts file.
For ex.
import 'core-js/es6/symbol'
to
import 'core-js/es/symbol'
This will work properly.
Change all es6 and es7 to es in your polyfills.ts
example:
import 'core-js/es6/reflect';
becomes
import 'core-js/es/reflect';
If you use #babel/preset-env and useBuiltIns, then you just have to add corejs: 3 beside the useBuiltIns option, to specify which version to use, default is corejs: 2.
presets: [
[
"#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}
]
],
For further details see: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpreset-env
Sure, I had a similar issue and a simple
npm uninstall #babel/polyfill --save &&
npm install #babel/polyfill --save
did the trick for me.
However, usage of #babel/polyfill is deprecated (according to this comment) so only try this if you think you have older packages installed or if all else fails.
Ended up to have a file named polyfill.js in projectpath\src\polyfill.js
That file only contains this line: import 'core-js'; this polyfills not only es-6, but is the correct way to use core-js since version 3.0.0.
I added the polyfill.js to my webpack-file entry attribute like this:
entry: ['./src/main.scss', './src/polyfill.js', './src/main.jsx']
Works perfectly.
I also found some more information here : https://github.com/zloirock/core-js/issues/184
The library author (zloirock) claims:
ES6 changes behaviour almost all features added in ES5, so core-js/es6
entry point includes almost all of them. Also, as you wrote, it's
required for fixing broken browser implementations.
(Quotation https://github.com/zloirock/core-js/issues/184 from zloirock)
So I think import 'core-js'; is just fine.
Just change "target": "es2015" to "target": "es5" in your tsconfig.json.
Work for me with Angular 8.2.XX
Tested on IE11 and Edge
I got this error today (13 April 2022) after upgrade core-js version from 2 to 3 and after I tried to find the answer for several Hour, finally I can solved it after update my babel.config.js and make it like this:
Before:
presets: [ "#vue/app" ]
After:
presets: [ [ "#vue/app", { useBuiltIns: "entry" } ] ]
Notes
I'm using Vue in my project
I already try almost all question regarding npm uninstall core-js and tried to re-install it again npm install core-js --save or delete node_modules, package-lock.json, and yarn-lock.json but still failed to solved it
I can solved it if I downgrade core-js version using this line : npm install core-js#2.6.5, but it is not a good solution for long term condition
Explanation for this problem: this problem happens because the path for core-js/es6 in version 3 is already changed to core-js/es that's why your project can't find it the right path for the directory where it pointed to core-js/es6
It is vital that Webpack is able to resolve the import statements prepended to source files by Babel, for example
import "core-js/modules/es.object.freeze.js";
If such an import statement is inserted into a file which does not reside in a package which has core-js as a dependency, then Webpack may not be able to resolve its location on disk, resulting in a ModuleNotFoundError.
The solution for me was to specify the application's node_modules directory in the resolve section of my webpack.config.cjs:
module.exports = {
resolve: {
modules: [
path.join(__dirname, "node_modules"), // Contains core-js.
"node_modules" // Webpack's default.
]
}
}
And of course core-js is listed as a dependency in my application's package.json:
{
"dependencies": {
"core-js": "^3.19.3"
}
}
For Angular 14 I had to run npm i --save core-js
I kept the polyfills the same as in the Amplify docs:
import 'core-js/es/typed-array';
import 'core-js/es/object';

react-native fails on bundling

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.

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

unable to resolve module `#expo/vector-icons`

Im not sure why I'm getting this error:
Unable to resolve module `#expo/vector-icons` from `...(directory path here)...` : Module does not exist in the module pack
I have tried the following things suggested on other forums/sites:
Clear watchman watches
Deleting the node_modules folder
Reset packager cache
package.json
{
"name": "app name",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null,
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"babel-plugin-module-resolver": "^2.5.0",
"babel-preset-expo": "^4.0.0",
"expo": "^21.0.0",
"firebase": "^4.5.1",
"geofire": "^4.1.2",
"moment": "^2.19.1",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",
"react-navigation": "^1.0.0-beta.13"
}
}
But still nothing, still getting this error
I resolved the issue by this command npm install #expo/vector-icons --save
I ran into the same issue. It's the babel-preset-expo. uninstall that and do the following
npm i metro-react-native-babel-preset --save-dev
delete the babel.config.json and create a new file called .babelrc
then specify the preset
{
"presets": ["module:metro-react-native-babel-preset"]
}
Sounds like vector-icons is another library you should be declaring in your package.json (https://www.npmjs.com/package/#expo/vector-icons)
Command npm install #expo/vector-icons --save do the trick !
The reason why I had this error, was because when I put useState in my app, VS Code auto imported it from react-native-vector-icons/node_modules/#types/react, instead of from "react"