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

Solve the error No bundle URL present by:

• Running the following command in your project root directory to delete the iOS build directory, and to kill other React Native sessions (assuming they're running on default port 8081) before re-building:

rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios

• Update your React Native workflow to avoid these error occur by combining the above combination of commands into an alias and appending it to your 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

Now you can run React Native iOS build (without worrying about some of the common red error screens of death appearing) with a simple alias shortcut:

rni

Answer 2

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

Answer 3

This problem happens when you not allow unsecure connections via localhost, or maybe you tried to accept unsecure connections via http.

To fix this, add this on info.plist:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
        <key>NSAllowsLocalNetworking</key>
        <true/>
    </dict>

Answer 4

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

Answer 5

As instructed in the error message:

Agreeing to the Xcode/iOS license requires admin privileges, please run "sudo xcodebuild -license" and then retry this command.

Running the following command worked:

sudo xcodebuild -license

Answer 6

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 7

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 8

following these steps:

• open ios file project with xcode
• in project bundle delete main.jsbundle file
• add new empty file by main.jsbundle name
• Run comment: react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
• now react-native run-ios

youtube link: https://www.youtube.com/watch?v=eCs2GsWNkoo

Answer 9

Try running this code:

$ sudo xcodebuild -license

This may fix the issue. This works for me.

Answer 10

I had the same error and was able to run the app only through Xcode. react-native run-ios did not work. To resolve the issue you need to remove the build folder at YOUR_PROJECT/ios/build/. After this you should be able to run your app through react-native run-ios again. Hope this helps.

Answer 11

For me the issue was it couldn't create the JS bundle. It doesn't state the error when building from Xcode so there is no way for you to know this. To find the error run the following command.

react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ./ios/release/main.jsbundle --assets-dest ./ios/release/main.jsbundle

For me the error was something with missing PureRenderMixin component. To which the solution can be found here: https://github.com/facebook/react-native/issues/13078. Basicly you have to manually install [email protected]. This can be done via running this command.

npm i --save [email protected]

This issue is now happening for everybody because newer versions of react alphas are being released (particularly alpha.5) and they are breaking react-native builds.

Answer 12

Solution --> npm start then open new Terminal and go to your project path and then hit react-native run-ios it works for me

Answer 13

Most of the cases this problem occurs when the DNS lookup / IP lookup fails to find localhost.

Solution :

Try adding the localhost ip to your etc host file.

you can add the below lines to your etc host file (/etc/hosts)

127.0.0.1 localhost

255.255.255.255 broadcasthost

::1 l . ocalhost

To confirm this is the issue you can hit the bundle url on safari (if you try it in chrome this will resolve but safari won't be able to resolve it). http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false

Answer 14

I had this same issue. But my problem was my Mac and iPhone were not in same wifi network.

So ensure that they are all in same network and rebuild once again. If this is not the case, try the solutions mentioned by other members here.

Answer 15

Be sure that your ATS settings are correct in .plist file.

You can find the file at /ios/{{project_name}}/Info.plist

localhost must be defined as exception request target like this:

<key>NSAppTransportSecurity</key>
    <dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

*(dont forget to remove this on release version..)

Answer 16

I had to run "react-native start" in a separate terminal. For some reason it wasn't running

Edit: Also, it turns out this was necessary because of a file permission not getting set properly. I am able to fix it by running the following command in an affected project directory.

chmod 777 node_modules/react-native/scripts/launchPackager.command

Answer 17

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 18

Just run in Terminal react-native start:

cd your react native app directory/ react-native start 

It will start up the packager, now don't close this terminal window, in another terminal window run your project. This is the only want that I found to get it working properly.

Answer 19

This is an issue with react-native v0.42.1. Try to close all terminal and XCode instances and run:

launchctl unload ~/Library/LaunchAgents/com.github.facebook.watchman.plist
watchman version
react-native run-ios

Answer 20

check your network proxy , better shut it down.

or u should find an other way to maintain the packager server

Answer 21

first close the simulator, then run these on terminal

npm install

react-native run-ios

Answer 22

I tried all solutions above, didn't work for me. This is what worked for me, you can try this out if the answers above didn't work out for you.

1. Open your project workspace on Xcode, and delete main.jsbundle file in [PROJECT-NAME]/main.jsbundle

2. Create a new main.jsbundle, in that same folder. {right-click -> choose new file -> it'll open a dialog box, look for Others section, -> choose Empty -> name the file main.jsbundle -> save

3. Then go back to the terminal of your project. And run this command:

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

4. Start your packager and run the IOS app again

I do hope this helps you out.

Answer 23

I am running iOS simulator and this method works:

1. Clean your native project

1.a For Android project

cd android
gradlew clean

1.b For iOS project

cd ios
xcodebuild clean

2. Clean your reactnative cach

2.a If you are using npm

  npm start -- --reset-cache

2.b If you are using yarn

  yarn cache clean

After that you can run your project again.

Answer 24

In my case I have accidentally deleted this script from the Build Phases in Xcode.

So, Make sure to have this script. If not, just click on " + " & select "New Run Script Phase" then paste the following code.

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

Answer 25

In my case the problem was fixed by restarting the adb server: adb kill-server && adb start-server

Answer 26

check your 'localhost' key at NSExceptionDomains dict in info.plist

if it doesn't exist, it causes error.

Answer 27

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 28

It has happened to me as well, after restarting my mac. There's a launchPackager terminal window opening up when you run your app on the simulator. I closed that window and terminated the process (I also cloosed the simulator), then run again react-native run-ios and everything works fine.

Answer 29

I had this issue happen for me as well...the issue was the packer wasn't running it seemed probably because my default shell was zsh. react-native tires to open a new terminal window and run .../node_modules/react-native/packager/launchPackager.command but this didn't run. Manually running that (and keeping it running) fixed this for me.

Answer 30

Assuming that you are using nvm and multiple versions of node installed, here is the solution:

1. Say that you run npm install -g react-native-cli in node v6.9.5.
2. Now make node v6.9.5 as default by running nvm alias default 6.9.5
3. 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.