react-native run-android not starting bundler so i tried
react-native start it showing below error.
┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
events.js:167
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::8081
at Server.setupListenHandle [as _listen2] (net.js:1286:14)
at listenInCluster (net.js:1334:12)
at Server.listen (net.js:1421:7)
at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:157:18
at new Promise (<anonymous>)
at Object.<anonymous> (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:156:12)
at Generator.next (<anonymous>)
at step (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:262)
at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:422
Emitted 'error' event at:
at Server.WebSocketServer._onServerError (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/ws/lib/WebSocketServer.js:82:50)
at Server.emit (events.js:187:15)
at emitErrorNT (net.js:1313:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
react-native info
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM)2 Duo CPU E7600 # 3.06GHz
Memory: 3.36 GB / 12.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.12.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 21.1.2, 23.0.1, 25.0.0, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
API Levels: 21, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.2 => 0.57.2
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
package.json
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.2"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
I tried cleaning cache and reverse adb still am getting that issue
react-native run-android showing below error.
Android Home configuration
export ANDROID_HOME=/<Path>/android-sdk-macosx
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
How to resolve this issue.
I tried following steps it resolves my issue
Running packager on different port react-native start --port 8084 --reset-cache
Run react-native run-android --port 8084 in second Command Prompt window.
After error screen appear clicking Android Ctrl + M, iOS Command + D.
Click Dev Settings button at the bottom.
Click Debug server host & port for device button.
Type localhost:8084 and click OK button.
Again run react-native run-android --port 8084
Replace the code with this one. The path of the file is -
node_modules\metro-config\src\defaults\blacklist.js
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
I found this solution from Github.
Its because the port 8081 is in use..
Try
react-native start --port=8080
This will work out.
Same exact problem I am facing too. I just updated to 0.59.1 and this isn't working...
As a work around, I am running the metro builder in a separate tab, and then running react in a separate tab.
react-native start --reset-cache
in one terminal and left it open
react-native run-android
in another terminal
Same issue I've faced. The above solutions didn't worked for me.
The problem was from NodeJS version.
The installed version of NodeJS was 12.11.1 in which I got the above problems. Then I replaced with the stable version 10.16.3 LTS and It works.
Hope this solution may helpful.
It's worked for me
react-native start --port=8080
I just solved by watching the youtube below..
https://youtu.be/LPYez4cs5LY
I summary like below
make the directory
"android/app/src/main/assets/"
replace sharedBlacklist variable in node_modules/metro-config/src/defaults/blacklist.js like below
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
with :
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
execute command like below on the terminal
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
Note: Solution for iOS
Updating files in node_modules is not a solution. It might fix it in your machine but won't fix it for all. Every time you reinstall the modules, you need to patch it up again.
Problem
When I ran yarn android the metro bundler successfully runs in a separate terminal and app runs with no issue.
But for yarn ios, app builds and opens up in simulator but the metro-bundler could not start so app is not running.
Cause
What I found is, react-native uses
packages/myapp/ios/myapp.xcodeproj/project.pbxproj:178 file to organize the sequence of action for a build.
buildPhases = (
9BD325B29C2F37E3FB2D5CCB /* [CP] Check Pods Manifest.lock */,
FD10A7F022414F080027D42C /* Start Packager */,
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
422396959450562FD5166D49 /* [CP] Embed Pods Frameworks */,
3C714C11B606C47481E15B97 /* [CP] Copy Pods Resources */,
You can see that(FD10A7F022414F080027D42C /* Start Packager */,) metro bundler is expected to run in the beginning so that app could connect to it ASAP.
In my case, the packager could not find the metro package as my node_modules folder has changed location. So I needed to let it know the new location.
How I solved? (Monorepo)
I dug deep and found the solution in packages/myapp/ios/myapp.xcodeproj/project.pbxproj:395
FD10344022414F080027D42C /* Start Packager */ = {
...
...
shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../../../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n";
you might notice that I am using /../../../node_modules because I have a directory structure like
.
└── node_modules
└── packages
├── common
├── myapp
└── their_app
Its normally like this ../node_modules
what I basically doing is maintaining two mobile apps in a single repo. See https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417 for more info.
In my case I just stopped Metro and tried running my app again and it worked.
For Unable to load script from assets issue, you need to follow below steps:
1] Please check whether "assets" folder exists or not in 'android/app/src/main/'
a] If it exists then, you need to delete two files(i.e. index.android.bundle and index.android.bundle.meta)
b] If it doesn't exist, then create the assets directory in it.
2] Use below commands from your root project directory:
cd android
./gradlew clean
3] Go to the root directory and check:
a] If there is only one file(i.e. index.js), then run below command:
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
b] If there are two files(i.e index.android.js and index.ios.js), then below command:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
4] Finally run below command:
react-native run-android
You can go to your Users folder and delete the ".expo" directory. It might be hidden as a system directory, so view all and then delete the .expo folder.
Run npm start again.
From the error what I understand it must run bundle command first before starting JS Server
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
Finally you can check if no any dependency is missing by following command
./gradlew assembleRelease -x bundleReleaseJsAndAssets
then you can run android and react native server
react-native run-android
react-native start --reset-cache
Good Luck !
Adding android:usesCleartextTraffic="true" to the application tag in AndroidManifest work for me
<application
...
android:usesCleartextTraffic="true"
...
I solved this by running "yarn start" on another terminal before starting "react-native run-android"
I have got the solution of the problem
go to your project and run 2 command shell
in first shell, run npm start
in the second shell, react-native run-android
then it will run
I suggest u delete this line import com.facebook.react.BuildConfig in Android / MainApplication
This is the Gradle issue.
update the distributionURL in app/gradle/wrapper/gradle-wrapper.properties
from
distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
to
distributionUrl=https\://services.gradle.org/distributions/gradle-6.6-all.zip
1.- Create directory:
android/app/src/main/assets
2.- edit file project:
node_module\metro-config\src\defaults\blacklist.js
or RN 0.64:
node_module\metro-config\src\defaults\exclusionList.js
Replace :
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
with :
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
or RN 0.64
var list = [/website\/node_modules\/.*/, /.*\/__tests__\/.*/];
with:
var list = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
3.- in folder project run this:
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
4.- react-native run-android
This work for me!
Related
The project can be cloned here: https://github.com/rafaelbrunoss/react-native-error
Error while building react native app
I tried to create a new project using react-native
npx react-native init Navigator --template react-native-template-typescript
After that, I tried to create the production files for Android using the command
cd android && ./gradlew assembleRelease
And it worked. But when I try to add some configuration to the initial project, the build starts to throw some errors. One of them I was able to solve executing
mkdir android/app/src/main/assets && 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
But then, for some reason, if I try to create the bundle again I get the error
error index.js: Import statement may only appear at top level in file index.js at 4:2.
Error: Import statement may only appear at top level in file index.js at 4:2
at minifyCode (/home/rafael/Documents/Library/react-native-error/node_modules/#react-native-community/cli-plugin-metro/node_modules/metro-transform-worker/src/index.js:99:13)
Using the last bundle file and then modifying the build command to
cd android && ./gradlew assembleRelease -x bundleReleaseJsAndAssets
I keep getting this error
Execution failed for task ':app:mapReleaseSourceSetPaths'.
> Error while evaluating property 'extraGeneratedResDir' of task ':app:mapReleaseSourceSetPaths'
> Failed to calculate the value of task ':app:mapReleaseSourceSetPaths' property 'extraGeneratedResDir'.
> Querying the mapped value of provider(java.util.Set) before task ':app:bundleReleaseJsAndAssets' has completed is not supported
I created some npm scripts to make it easy to execute this commands
npm run fix:bundle
npm run gradle:clean
npm run build:prod:android
They are all in the project here: https://github.com/rafaelbrunoss/react-native-error
I tried changing the version of gradle and android gradle plugin. I also tried to tweak something on babel.config.js and metro.config.js, but I got nothing.
It seems that the devDependency "react-native-gradle-plugin": "0.72.0" somehow messes with the build process. After I removed that, the build was successful.
Unable to Build .apk in react native
(You have symlinks in your project - watchman does not follow symlinks. OR Check blockList in your metro.config.js and make sure it isn't excluding the file path.
while tring tu build dev-app.apk (react-native bundle --platform android --dev false --entry-file app.js --bundle-output android/app/build/generated/assets/react/release/index.android.bundle --assets-dest android/app/src/main/res)
error:
SHA-1 for file N:\flutter client\client app\app.js (N:\flutter client\client app\app.js) is not computed.
Potential causes:
1) You have symlinks in your project - watchman does not follow symlinks.
2) Check blockList in your metro.config.js and make sure it isn't excluding the file path.
delete and reinstal node_modules
I'm in a process of upgrading React Native from 0.61.5 to 0.64.2 and I have a problem running the Android app.
This is the output I get when trying to start it:
$ react-native run-android --verbose
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
(node:14959) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
Jetifier found 1313 file(s) to forward-jetify. Using 12 workers...
info JS server already running.
info Installing the app...
debug Running command "cd android && ./gradlew installDebug -PreactNativeDevServerPort=8081"
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: spawn ./gradlew ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
My Android environment is configured, and I can actually run the exact same command that react-native runs, and it works without the issue:
$ cd android && ./gradlew installDebug -PreactNativeDevServerPort=8081
<-------------> 0% CONFIGURING [7s]
> root project > Resolve dependencies of :classpath > maven-metadata.xml
(gradle eventually finishes the build with a success).
Permissions for gradlew seem ok:
$ ls -la ./android/gradlew
-rwxr-xr-x 1 mateusz 139652859 5766 20 Jul 13:44 ./android/gradlew
gradle-wrapper.properties looks as follows:
$ cat android/gradle/wrapper/gradle-wrapper.properties
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
React Native CLI is up-to-date:
$ react-native --version
react-native-cli: 2.0.1
react-native: 0.64.2
I found several people had a similar problem but none of them to be exactly the same.
Things work fine on the main branch which still uses 0.61.5. I suspect it may be just me not updating some config file, however I have no idea how to get some more verbose hint on what exactly I have to change.
Any ideas? Thanks!
Turns out react-native was looking for gradlew in a wrong directory!
It looked for it in android/myApp, whereas it should be just android/.
What fixed the issue was a config change in react-native.config.js:
What I had before:
const android = require('#react-native-community/cli-platform-android');
module.exports = {
platforms: {
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
project: {
android: {
sourceDir: './android/myApp',
stringsPath: './src/main/res/values/strings.xml',
manifestPath: './src/main/AndroidManifest.xml',
buildGradlePath: './build.gradle',
settingsGradlePath: '../settings.gradle',
assetsPath: './src/main/assets',
mainFilePath: './src/main/java/com/company/myapp/MyApp.java',
},
},
};
What I have now (it works):
const android = require('#react-native-community/cli-platform-android');
module.exports = {
platforms: {
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
project: {
android: {
sourceDir: './android',
stringsPath: './myApp/src/main/res/values/strings.xml',
manifestPath: './myApp/src/main/AndroidManifest.xml',
buildGradlePath: './build.gradle',
settingsGradlePath: './settings.gradle',
assetsPath: './myApp/src/main/assets',
mainFilePath: './myApp/src/main/java/com/company/myapp/MyApp.java',
},
},
};
Hope everyone is doing great i have a issue in react native command i made the assets folder and after that running a command
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
but its giving me error again n again
Unable to resolve module `AccessibilityInfo` from `C:\AnkitaFolder\Vanilla1\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module `AccessibilityInfo` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
I tried everything possible but its still not working once it worked and again its giving the same error.Version i am using are mentioned below..
NPM-VER- 6.3.0
"react": "16.4.1",
"react-native": "0.56.0"
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "5",
"jest": "23.4.2",
"react-test-renderer": "16.4.1"
},
Try to clean npm and all caches. If its not helping maybe your bundle props is wrong or files corrupted
rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-*
cd android && ./gradlew clean
Delete all node_modules
npm cache clean or npm cache clean --force
Or
On windows React 0.56 not working forhttps://github.com/facebook/react-native/issues/19953alsohttps://github.com/facebook/react-native/issues/20353
I am trying to add code push to my react native app, and followed all steps mentioned in https://github.com/Microsoft/react-native-code-push
After doing it, my debug build works fine
I use :
$ ./gradlew installDebug
but the release build fails which is given by following command :
$ ./gradlew installRelease
which gives following error :
:app:generateReleaseResources
:app:mergeReleaseResources
:app:bundleReleaseJsAndAssets
FAILURE: Build failed with an exception.
* What went wrong:
Could not list contents of '/Users/jayshah/Documents/testdir/ExampleApp/node_modules/.bin/_mocha'.
GitHub
Microsoft/react-native-code-push
react-native-code-push - React Native plugin for the CodePush service.
I use following command to generate the bundle :
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
my react native version is 0.18,
code push version is 0.16
Turns out this is a problem frequently encountered when upgrading in react native from pre 0.15 to post 0.15 versions.
The react gradle task bundleReleaseJsAndAssets seems to be the culprit.
one can disable it using
enabled config.bundleInRelease ?: false
in react.gradle or comment the line (no guarantees to work properly though)
inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
and manually made bundle file using
react-native bundle command
react-native bundle --platform android --dev false --entry-file index.android.js \
--bundle-output android/app/src/main/assets/index.android.bundle \
--assets-dest android/app/src/main/res/
or curl based command
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"