New react-native project won't load on iOS or android - react-native

On Mac OS X 10.14
Creating a new project with:
react-native init project
It builds the new project with the following list: https://pastebin.com/ED8qd0Ee
I run npm install to update anything.
Then I run react-native run-android The project builds and sends to device but I get an error there and the MetroBundler opens but all I get is Process terminated. Press to close the window.
Im not sure what the issue is? I had no problem running a test app a week ago. I get back to it today and this.
On iOS, the app never builds on the device. The metro bundler again terminates immediately and the process reads off an infinite list of errors

react-native init project this command create the project with latest versions so try to create project with previous versions like this react-native init newproject --version react-native#0.54.4
you can choose any version here is mine
"react": "16.6.3",
"react-native": "^0.57.8",
"devDependencies": {
"#babel/runtime": "^7.0.0",
"redux-devtools-extension": "^2.13.5",
"schedule": "^0.4.0",
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.51.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
also check this code in .babelrc file
{
"presets": [
"module:metro-react-native-babel-preset"
]
}
Run this command in your project rm -r node_modules it will delete node_modules folder in your project and change your package.json file and Run Command npm install.

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.

React-native: index.js: Transformer.transform is not a function

I'm new to react-native. After upgrading react-native from 0.48.3 to 0.62.2 on a project I get the error when running "react-native run-ios" command: "index.js: Transformer.transform is not a function".
Error screenshot
I had the same issue. Here is my solution:
If you are running npx react-native start, just stop it.
Run npm outdated
Updated in package.json the Wanted versions. Her is my configuration: "devDependencies": { "#babel/core": "^7.11.1", "#babel/runtime": "^7.11.2", "#react-native-community/eslint-config": "^1.1.0", "babel-jest": "^25.5.1", "eslint": "^6.8.0", "jest": "^25.5.4", "metro": "^0.61.0", "metro-core": "^0.61.0", "metro-react-native-babel-preset": "^0.59.0", "react-test-renderer": "16.13.1" }
Then delete the node_modudes folder
Run npm install
Run npx react-native start
Run npx react-native run-ios in new terminal.

I face this error with my react-native project

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.

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

React-native install issue in expo app

I'm trying to learn react-native by creating an app using the expo development environment. I had a working app (little more than the code that shipped with expo) until installing redux. Currently I am getting the following error from the XDE:
Problem checking node_modules dependencies: Unexpected end of JSON input
and the following from the ios simulator:
undefined is not an object (evaluating 'ReactPropTypes.string')
Package.json:
{
"name": "myApp",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null,
"main": "main.js",
"scripts": {
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/ex-navigation": "~3.0.0",
"#expo/samples": "~1.0.3",
"babel-preset-react": "^6.24.1",
"expo": "17.0.0",
"react": "^16.0.0-alpha.12",
"react-native": "^0.45.1",
"react-redux": "^5.0.5",
"redux": "^3.6.0"
},
"devDependencies": {
"jest-expo": "~1.0.1"
}
}
I believe my node modules contain valid JSON. It should be noted that I'm using a more current version of react-native than expo. Is this an issue with the packages I have installed? Which files would be helpful in solving this?
Although I haven't been able to fix this particular error. This one and many others can be avoided by using yarn instead of npm when working with expo (I have no affiliation with either tool).
I believe this is due to a bug in the current release of npm 5. As mentioned in the other answer here, using npm 4 or yarn will resolve this problem.