What is the meaning of 'No bundle URL present' in react-native?

Question

When I run a react-native project, I get a error no bundle URL present , but I don\'t know what mistakes I do, I was very confused.

Answer 1

Reason:

This is because the app cannot find out the server (which serves the UI - by javascript code).

Solution:

• Make sure everything related to react native closed (not necessary, just to have clean start for my solution, after my explanation, you can figure out this is needed or not)
• run npm run start or yarn start first
• wait for this command done job (usually you will see Loading dependency graph, done.)
• run react-native run-ios/android

Explanation:

• React Native comes with 2 parts:

  • Native part
  • Javascript part

• Build commands:

  • react-native run-ios/android is to build native part then deploy to devices and start app on devices (simulator/emulator/real device). This usually took 3~4 mins to finish.

  • npm run start or yarn start is to build the javascript part and start the dev server to serve the built UI to the app. This usually took 30 secs to finish.

=> Normally, the javascript part finished first then the native part came later. (based on time they used).

=> this is only true for the first time build (fresh build).

=> for re-build:

• The native part just took 10~15 secs to check changes and because no change for native part => done before the javascript part was built and served. (I am not sure the javascript part was rebuilt or not but it took long time than native part)

• So that is why we had this issue, the app ran and required thing that did not exist yet.

Bonus:

• react-native run-ios/android will auto start the dev server for you.
• That's why when you ran react-native run-ios/android right after react-native init <app_name>, everything ran well. (because auto start feature and the time was took for fresh build as state above).
• Other "removing" solutions worked because they forced rebuilding.

Time used on this answer was relative to my machine => may different on others.

Answer 2

Had same problem when I did bundle my app. Check that your main.jsbundle is targeted to your main Project

Answer 3

What solved it for me:

• Open a terminal window
• cd into YOUR_PROJECT/ios
• Remove the build folder with rm -r build
• Run react-native run-ios again

Alternatively, you could open Finder, navigate to YOUR_PROJECT/ios and delete the build folder.

Then run react-native run-ios again.

Source: Andrew Bancroft

Answer 4

Close your simulator and the terminal. Open new one and go to your project, then upgrade your react-native like this:

react-native upgrade

Issue in: Infinite recursion in RCTFatal when the bundle fails to execute.

Answer 5

I have found the easiest/quickest way to bypass this is to exit the app within the simulator (2 x Cmd + Shift + H) and re-launch.

Answer 6

I just ran into this problem as well (first time getting started with React Native). The problem disappeared when - while an ios simulation(react-native run-ios) was running - I ran npm install and then react-native run-ios again. In the terminal window, it showed that it was bundling, and then the simulator showed the welcome screen.

Check this link for briefs after react-native init PropertyFinder line try to use npm start (This one works for me)

========================================================================

UPDATE for 16.9

My port 8081 was blocked by McAfee. Using a different port directly wasn't working react-native start --port=8082 and react-native run-ios --port=8082

Tried almost all solutions given here. but anything didn't work.

        "react": "16.9.0",
        "react-dom": "^16.12.0",
        "react-native": "0.61.5",

Solution:

Searched for 8081 in Xcode and replaced all of them with 8082. Then run the same commands to build and run the app. App works smoothly

react-native start --port=8082
react-native run-ios --port=8082