main.jsbundle file showing in my iOS project but still throwing "No bundle url present"

Question

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.

CodeChanger · Accepted Answer · 2021-06-22T12:59:44.863

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.

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.

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.

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

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
This worked for me thanks! but is there a reason for using --dev=false instead of true? — Robin Dalmy, Aug 01 '22 at 15:31
The following worked for me: `"bundle:ios": "npx react-native bundle --entry-file ./index.tsx --platform ios --bundle-output ios/main.jsbundle --config ./metro.config.js"` and `"postinstall": "npm run bundle:ios"` and making sure `ENTRY_FILE=index.tsx` — Megan, Jun 08 '23 at 18:48

score 1 · Answer 2 · answered Aug 04 '20 at 22:57

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.

score 1 · Answer 3 · edited Feb 01 '22 at 07:58

1

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.

edited Feb 01 '22 at 07:58

Tyler2P

2,324
26
22
31

answered Jan 24 '22 at 17:41

Vidya

11
1

its throwing cant understand unstable_disableES6Transforms: true – Kartiikeya Apr 13 '22 at 07:10

score 1 · Answer 4 · edited Aug 08 '23 at 17:04

1

To create main.jsbundle simply add in package.js: -

"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"
}

then run npm run postinstall

edited Aug 08 '23 at 17:04

maxshuty

9,708
13
64
77

answered May 10 '23 at 12:30

Deepak Singh

749
4
16

score 0 · Answer 5 · answered Jul 21 '22 at 10:41

I had the same issue: the ios build was failing because it could not find main.jsbundle.

The below solution worked for me. Run the below command, you have to run it once only

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

It will generate a main.jsbundle file.

Note: No need to generate an assets file if you want to use the metro server for development.

Build the app with xcode or "npx react-native run-ios"

Now you can see the app opened in the simulator/device, but it is a static app i.e you cannot use fast reload or debug options

For that, in a new terminal start the metro server by typing

npx react-native start

Now restart the app on the device, your app will be attached to the metro server and you can use development tools after that.

main.jsbundle file showing in my iOS project but still throwing "No bundle url present"

5 Answers5