9

I am creating a new React Native app but facing errors like "No bundle URL present" while running it on iOS Simulator.

Command to Run App on iOS:

react-native run-ios --port=8089

I tried every possible solution suggested on the below links.

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

https://www.andrewcbancroft.com/2017/04/22/solving-react-natives-no-bundle-url-present-error/

and lots of other references but no luck at all.

Solution 1: I tried to add AppTranportSecurity flags in info.plist.

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
        <dict>
            <key>NSAllowsLocalNetworking</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

Solution 2: Try to remove the build from the iOS folder and build it again.

  • Remove the build folder with rm -r build
  • Run react-native run-ios again

Solution 3: Added below the line in Package.json file

"build:ios": "react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle"

No luck at all.

Even my metro builder running on port 8089 as 8081 uses by the MacFee firewall app.

enter image description here

CodeChanger
  • 7,163
  • 4
  • 41
  • 74

3 Answers3

17

Finally, I resolved the above issue. Below is the solution which helps me to resolve this issue.

So As I mentioned in my question I tried all most every solution posted on SO or another portal but didn't succeed. So I investigate more on generated iOS code and come to know the below points.

  1. My main.jsbundle generating but no JS code inside that file so that is my first issue in this app.

Solution: Try to generate your main.jsbundle file with the below react-native command and verify it in your iOS folder.

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

Or

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

Que: What it will do?

And: It will manually generate main.jsbundle file with all JS code.

  1. After generating main.jsbundle file I tried to run the app again and getting the same error "No bundle url"

Solution: I found that the manually generated file is not added in my Project target so I added main.jsbundle file into my app target.

Step1: Select Your main.jsbundle in XCode -> Project Navigator pane

Step2: Check Related Project Target in Target Membership section.

enter image description here enter image description here

And last and final step is to add the build script command for iOS in package.json

"scripts": {
    ...
    "bundle:ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
    "postinstall": "npm run bundle:ios"
  }

Hope this will helps those who struggle with this issue.

I literally struggle with this issue for the last 3 days.

Thanks to StackOverflow & Github issues.

Ref Links:https://github.com/facebook/react-native/issues/18472

CodeChanger
  • 7,163
  • 4
  • 41
  • 74
  • i tried your solution but every time am getting this error: "node_modules/@hapi/hoek/lib/assert.js:20 throw new AssertError(args); ^ Error: Method no longer accepts array arguments: try at new module.exports " – Khushi Mar 04 '21 at 05:17
  • this command worked for me `react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'` need nothing else after this command – Syed Amir Ali Oct 06 '21 at 12:28
1

I would like to add the solution that I found as I had initially buried but not solved the error using the build:ios method. This answer is for others also struggling and might be a solution:

My main.bundle.js wasn't present because the node_modules/react-native/scripts/react-native-xcode.sh failed to bundle because the relative import paths differ in debug vs releases in RN.

I was attempting to import SVG files using babel-inline-import + react-native-svg. Because react-native runs the debug mode from your command line the root will match in the files importing the svg's, but because when React Native builds in release mode (on the CI or when you do Xcode->Product->Archive) it runs the .sh script to make the bundle with the iOS folder as root. So now the patbs are broken.

If you use the build:iOS trick you skip that error but the app crashes immediately, because it's still missing the assets. The tricky part was finding the relatively simple error in the logs. Spent a three days on this as well.

Sebastiaan
  • 792
  • 7
  • 10
0

I found the solution to your question here on Babel Github.

Change your babel.config.js to use this

module.exports = {
    presets: [['module:metro-react-native-babel-preset', {
        unstable_disableES6Transforms: true
    }]],
};

The unstable_disableES6Transforms line worked for me.

Tyler2P
  • 2,182
  • 12
  • 17
  • 28
Vidya
  • 1