Cli: Metro bundler doesn't start and/or doesn't generate bundle on iOS

[jacquesdev]

Environment

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 469.09 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.10.0 - ~/.nvm/versions/node/v10.10.0/bin/node
Yarn: 1.15.2 - ~/.yarn/bin/yarn
npm: 6.11.3 - ~/.nvm/versions/node/v10.10.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5791312
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
@react-native-community/cli: ^2.9.0 => 2.9.0
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

I'm attempting to upgrade from react-native 0.59.10 to 0.60.5. When I run react-native run-ios, it builds the iOS app, but does not automatically start the metro bundler server.

If I do try to run the server manually before, it seems to work ok and gets to the point of Loading dependency graph, done. but then it does not actually seem to generate the bundle when the app opens up after installing, ie not seeing the green bar running through all the JS files.

Running react-native run-android it seems to start up the bundler ok though. I can't tell yet if it's generating the bundle as expected, still need to spend time on getting the dependencies up to date, but for right now, first just trying to get iOS up and running.

Updated

Edit: I've tested on node v10.16.3 and v12.9.1, but that does not make a difference unfortunately.

[thymikee]

cc @lucasbento

[kormic]

Don't know if it's the same bug but for me also when running react-native run-android the metro bundler doesn't start automatically. I need to run first react-native start and then in a separate window react-native run-android. It's a fresh project created with react-native cli in a ubuntu linux machine. The @react-native-community/cli version is 2.9.0 and node version is 10.15.3.

[ger86]

Add this script to your "Build Phases" of XCode in the third position

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

[danieltov]

Hey @ger86, Is there a similar fix for the exact same issue on Android? (https://github.com/react-native-community/cli/issues/868)

[jestinjoshi]

Hey @danieltov, found the fix for Android? I'm facing the same issue.

Hey @ger86, Is there a similar fix for the exact same issue on Android? (#868)

[diamantisufi]

Hi, @jestinjoshi did u find any solution for this error on Android?

[jestinjoshi]

Hi @diamantisufi sorry for replying so late. I haven't found a solution yet and I'm working on another project for now. Let me know if you find anything. 😄

[prakhar28]

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

After doing this also it is not working in react native 0.62