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.

Answer 1

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.

2. 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