Bundler does not load automatically (No bundle URL present error)

Question

After updating my React Native app to the latest version up to date (0.60.4), launching my app using react-native run-ios would result in my application starting without a Metro Bundler.

The application would then display the following error:

In order for my application to function properly, I need to start the Metro Bundler using npm start and then run react-native run-ios.

Although this is a workaround, previously I did not have this issue and simply running react-native run-ios would start the Metro Bundler automatically. How can I resolve this?

EDIT: My NSAppTransportSecurity from Info.plist:

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

Answer 1

I guess this issue is common when upgrading existing projects to React Native v0.60.+.

For anyone encountering this issue on Mac:

1. Open Xcode and locate Build Phases under your project.
2. Tap on Editor -> Add Build Phase -> Add Run Script Build Phase.
3. Tap on the newly generated Run Script on the bottom of Build Phases tab.
4. Paste the following code:

export RCT_METRO_PORT="${RCT_METRO_PORT:=8081}"
echo "export RCT_METRO_PORT=${RCT_METRO_PORT}" > "${SRCROOT}/../node_modules/react-native/scripts/.packager.env"
if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then
if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then
if ! curl -s "http://localhost:${RCT_METRO_PORT}/status" | grep -q "packager-status:running" ; then
echo "Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly"
exit 2
fi
else
open "$SRCROOT/../node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"
fi
fi

5. Launch your project through Xcode. Metro Bundler should now automatically start.
6. After saving your changes, the next time you run react-native run-ios in Terminal, Metro Bundler will automatically start and the No bundle URL present error will no longer persist.

Answer 2

Follow this steps. I have also faced this issue and this was solved by :

1. Update your react native cli to the latest version.
2. If using androidX then please use jetifier and npx.
3. Update your package JSON in which development dependencies look like this

"devDependencies": {
   "@babel/core": "^7.4.3",
   "@babel/runtime": "^7.4.3",
   "babel-jest": "^24.7.1",
   "jest": "^24.7.1",
   "metro-react-native-babel-preset": "^0.53.1",
   "react-test-renderer": "16.8.3"
},

There is a walk around to start the metro bundler. Use : npm start --reset cache This will start your metro bundler.