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:

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

Answer 2

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 other 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 .jsbundle file I tried to run the app again and getting the same error "No bundle url"

Solution: I found that 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 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 who struggle with this issue.

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

Thanks to StackOverflow & Github issues.

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