React Native BatchedBridge error - react-native

Whenever I move initialization code out of index.ios.js and index.android.js and into an app/index.js file I get the following error
Could not get BatchedBridge, make sure your bundle is packaged correctly I'm using yarn and wasn't getting this issue w/ npm. When I move code back to original files everything works fine again.
I've also tried removing yarn from my project uninstalling yarn npm uninstall -g yarn doesn't work.
I've done adb reverse tcp:8081 tcp:8081 and set up connection to my computer in dev settings.
Not sure what's causing the issue.

Related

Cannot run program "npx": error=2, No such file or directory when running React Native app

I have been working with react-native project in another pc and it has been working correctly. Now I cloned project to another device where I have react-native installed since I work with other project and I cannot run it.
When I run react-native run-android I get this error:
Cannot run program "npx": error=2, No such file or directory
I'm using Android Studio 4 on Mac OS Catalina 10.15.6.
I solved the problem by running Android Studio with bellow command on console.
$ open -a "Android Studio.app"
Simple steps you need to go through to make it work with npx
sudo npm uninstall -g react-native-cli
sudo npm i -g npx
npx react-native run-android
More detailed explanation why this is happenig
Issue was that Facebook is not using anymore react-native-cli as they are using npx.
As stated in Facebook page:
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues.
So i had to run sudo npm uninstall -g react-native-cli to remove react-native-cli
They also say that npx is shipped with nodejs but that wasn't my case.
React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js.
So I had to install it using sudo npm i -g npx
After installing npx then just need to run npx react-native run-android.
Be aware of npx before react-native run-android
Now you don't have any command react-native now we only have 'npx' and react-native run-android is just a parameter for npx. For ex. to start metro we should run npx react-native start
I had the same issues, so I followed these steps:
Start by installing the latest version of Android Studio (Don't delete the old version, just copy paste that to another directory or in my case I just added the Android Studio 3.2.1 that I had to a folder called olderAndroidStudio, on mac).
Make sure you don't click on import settings from Existing.
Follow along the installation, and complete it.
Build and Run, app runs without any problems.
I additionally uninstalled react-native-cli using the method given in the accepted answer.
In my case, I just quit Android Studio and reopened, and the error was gone.
Maybe throw in a ./gradlew clean for goo measure.
I solved it by finding the command that was throwing error and ran it directly
node -e "console.log(require('react-native/cli').bin)"
which outputs a path, something like
$HOME/my-app/node_modules/#react-native-community/cli/build/bin.js
then I pasted that path in android/app/build.gradle
project.ext.react = [
entryFile: "index.js",
enableHermes: true, // clean and rebuild if changing
cliPath: "$HOME/my-app/node_modules/#react-native-community/cli/build/bin.js" // <--- add this
]

React Native: error: bundling failed: index.js: "" is not a valid identifer name

I have a React Native app which was running perfectly earlier this morning. I've deleted package-lock.json after mistakenly doing an npm install instead of a yarn install. Then I've ran yarn install and now when I try to run my app I get this error at the packager:
error: bundling failed: index.js: "" is not a valid identifer name
BUNDLE [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
I've also closed packager and Vscode, removed node_modules and tried running yarn install again but I get the same error. I haven't changed a single line in my code and it was working before that.
What is going on?
It is already opened as an issue.
https://github.com/facebook/react-native/issues/27118
https://github.com/facebook/react-native/issues/27120#issuecomment-549832676
Simply you need to delete "node_modules" and again run the command:
npm i or yarn
Also, you can simply re-create the scratch project with
react-native init example
It will work as expected. They reverted the changes on #babel/run-time at 7.7.1 version.
Have fun 🎊🎉
Delete node_modules and packages-lock.json, erase trash, close Metro Bundle, delete the app from emulator/simulator and run npm install, this way worked for me.
I had the same issue and none of the solutions mentioned here or in the links worked for me. The issue was the react-native local and global versions were different.
node node_modules/react-native/local-cli/cli.js run-ios worked for me.
and while bundling, node node_modules/react-native/local-cli/cli.js bundle --entry-file...
In short replace react-native with node node_modules/react-native/local-cli/cli.js when trying to run or bundle

React Native : unable to resolve module - Android Emulator

Running react native app in android emulator using port 8088 and I see this error.
I have tried running in default port 8081 and the basic app welcome page works ok but the changes are not reflected in the app. My work mcafee uses the same port so I have changed the port in Android emulator to '10.0.2.2:8088' and tried running react-native run-android --port 8088 and I see the error as shown here :
I have tried manually pasting index file to react-native/scripts folder, now I see this :
Thanks for your help.
I fixed it using a post in https://github.com/facebook/react-native/issues/23908. Copied few files to older version and tried to restart the app in port 8088 - worked ok. Can see the changes reflected too :)
I think you need to reverse your ports too.
enter this command on the project root
$ adb -s <device name> reverse tcp:8088 tcp:8088
also, check the link below for more info
https://facebook.github.io/react-native/docs/running-on-device
The solution is already given in the red screen above. They have suggested you to do the following.:
watchman watch-del-all
rm -rf node_modules && npm install
npm start --reset-cache
rm -rf /tmp/haste-map-react-native-packager-*
Try these commands while you're in root folder of App.js and running bash terminal. I had solved my problem just deleting node_modules folder and reinstalled node modules by npm install and then restart the app. Everything worked out fine!

Hot reloading with create-react-native app on vagrant

I have used create-react-native-app and expo to build an application on a vagrant ubuntu and run it using yarn start.
When i make changes to my file on my host machine, the changes are not
reflected.
With create-react-app, CHOKIDAR_USEPOLLING=true worked and all my
changes were reflected instantly but this is not the case for native.
Does anyone know how to get this to work?
Please try using yarn start instead of npm start since your current of npm (5) has issues with create-react-native-app as of today.

No bundle URL present (react native)

Just installed react native and trying to get Hello World up and running. Been receiving this error for the last few hours:
"No bundle URL present.Make sure you're running a packager server
or have included a .jsbundle file in your application bundle."
I've referred to this: What means of no bundle URL present in react-native? and other similar questions, and tried everything: using my ip addresse, different combos of react-native run-iso and npm install while running and not running, tried deleting builds, cleaning project, restarting Xcode, simulator multiple times, tried react-native-upgrade, edited into.plist to allow arbitrary loads, manually setting the path to my index.ios.js, everything, and nothing works.
I noticed many ran into this issue when trying to build on their device. i'm not trying to do anything fancy, just get 'hello world' up and running.
Any other solutions I am not aware of?
cd into YOUR_PROJECT/ios and rm -r build, then run again react-native run-ios
I have the same issue, my problem was with info.plist I just
config it as the following:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>
from this solution https://stackoverflow.com/a/48471978/1627358
And then add Bash config file .bashrc with this command:
echo "alias rni=\"kill \$(lsof -t -i:8081); rm -rf ios/build/; react-native run-ios\"" >> ~/.bashrc; source ~/.bashrc
Then run rni
from this solution https://stackoverflow.com/a/44080527/1627358
And it works fine with me.
run the following code:
killall -9 node
rm -rf ios/build
react-native run-ios
it will open launchpackager.command and the application will install on the ios simulator
The solution that worked for me.
You need to run:
yarn start
And at the same time (in a different terminal window):
yarn run:ios
Assuming that you are using nvm and multiple versions of node installed, here is the solution:
Say that you run npm install -g react-native-cli in node v6.9.5.
Now make node v6.9.5 as default by running nvm alias default 6.9.5
Now run react-native run-ios
The problem is, you have multiple versions of node installed via nvm and to install react-native-cli you have switched or installed latest version of node, which is not marked as default node to point in nvm yet. When you run react-native run-ios this opens up another new terminal window in which default nvm is not pointed to the node version where you have installed react-native-cli. Just follow the above setup, I hope that should help.
Answered the same here: https://stackoverflow.com/a/45267703/1292050
I had this issue after I run the following commands to clean the project to see the changes which were invisible because of the cache and so on:
watchman watch-del-all
rm -rf node_modules && npm install
rm -rf /tmp/metro-bundler-cache-* or npm start -- -- reset-cache
rm -rf /tmp/haste-map-react-native-packager-*
The reason for the issue was in the comment in dom-structure which didn't let the application run on the device. So, check the comments too ;)
faced similar issue while running in real device app was getting crash after uploading to testflight upload and install folks this issue is killer
saved by this link
https://onexlab-io.medium.com/no-bundle-url-present-fixed-ca2688a80f66
The solution that worked for me.
> sudo vim /etc/hosts
add
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
then
> sudo killall -HUP mDNSResponder
the reason is I change hosts
I had the same issue happen to me not too long ago. It appears that if you renamed the project to something else and the project folder itself was renamed, you need to make sure you replace all instances of the old name with the new name and do not forget to change file names of your .xcscheme in ProjectName > ios > ProjectName.xcodeproj > xcshareddata > xcschemes. I also had to remove the build directory. Hope this works for you as well!
I've run into this issue when I tried to sync my files to iCloud Drive. I have no idea what causes this, but as soon as I turn off my iCloud Drive and reinstall brew and Node, it started to work again. I can only think that when I turned on iCloud Drive, I might have ended up having two different Node versions or any other dependency.
To debug, your best first step is to scroll through the log text that outputs in the terminal window where you fired off "npx react-native run-ios" and search for the word like "error" or "failed". This will point you toward something more specific than the general "No bundle URL present" error.
For example, you might see something like "BUILD FAILED The following build commands failed: ProcessInfoPlistFile". In this example, I'd then know to go check on my Info.plist. You might see something different, but the debug methodology would still be the same.
If you are trying to run iOS, another idea is to build your app with Xcode itself by opening <YOUR_PROJECT_NAME>.xcworkspace with Xcode, then review its error messages.
Similarly, if you are trying to run Android, then try running with Android Studio and review its error messages.
Lots of answers are given, but one thing you should surely be taking care of while facing this issue is to
make sure that your Metro server is running.
npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'
Try This, clear project, and run in xCode.
This relates to the answers from #Daria Kozlova and #Daniel Twork
I needed to have the server running in another tab, i.e. yarn start
But what I hadn't noticed is that the server had crashed with an error like:
jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
Usually this happens when watchman isn't running. Create an empty `.watchmanconfig` file in your project's root folder or initialize a git or hg repository in your project.
Error: Watchman error: std::__1::system_error: open: /Users/anentropic/Documents/Dev/Work/myproject/mobile-app: Operation not permitted. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.
...
watchmanResponse: {
error: 'std::__1::system_error: open: /Users/anentropic/Documents/Dev/Work/myproject/mobile-app: Operation not permitted',
version: '2022.09.12.00'
}
The fix for that can be found here:
https://github.com/facebook/watchman/issues/977#issuecomment-1189903929
i.e. run:
watchman watch-del-all
watchman shutdown-server
and then yarn start again
react-native run-ios works now
just try,
npm start
npm react-native run-ios
The below solved the same problem i had
brew update
brew reinstall watchman
Edit /etc/hosts
127.0.0.1 localhost
this is work for me !!!