Unable to run react-native app in Debug mode from Xcode

[nmeibergen]

Current Behavior

When triggering a react-native app from within Xcode in Debug build configuration I get the error: Error: Unable to resolve module ./src/main from /Users/nathanjulianomeibergen/Documents/development/happynrwl/.

Expected Behavior

I'd expect the app simply to start successfully.
I believe however that this did used to work. I recently migrated to the latest NX version - 14.7.5 -, but I am not 100% sure that it used to. My approach is mostly to run the Release version in Xcode for Archiving purposes.

Why I want this?

In my real-world application I stumble upon an error when running nx run-ios myapp. For better debugging purposes the error even suggest to try running from Xcode. The Release version starts up fine, that's why I wanted to know what is happening in Debug mode.

Steps to Reproduce

In order to reproduce simply run (as described here):

npx create-nx-workspace happynrwl \
--preset=react-native \
--appName=mobile

Now head to apps/mobile/ios/ and open Mobile.xcworkspace. Then in Xcode 'Edit Scheme' and make sure that the 'Build Configuration' is set to 'Debug'.

Environment

Info from npx react-native info:

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 201.17 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.9.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.1 - /opt/homebrew/bin/npm
    Watchman: 2022.09.05.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.10 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 9.0.0 => 9.0.0
    react: 18.2.0 => 18.2.0
    react-native: 0.69.4 => 0.69.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[curthipster]

I'm running into the same issue, on a newer version of xcode and react-native:

% npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 1.02 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.3.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.11.0 - /opt/homebrew/bin/npm
    Watchman: 2022.06.06.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0
      System Images: android-29 | Google APIs ARM 64 v8a, android-29 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 14.0/14A309 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 9.0.0 => 9.0.0 
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.0 => 0.70.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[curthipster]

@xiongemi do you know if #11971 fixes this issue as well?

[curthipster]

I just tested with 14.7.6, which includes #11971. I was able to build and run in XCode.

Edit: it worked at first, and now it's not. I can't tell what's changed. Argh.

[nmeibergen]

Upgraded to 14.7.6 and it's not working for me either.

[curthipster]

I just tested with 14.7.6, which includes https://github.com/nrwl/nx/pull/11971. I was able to build and run in XCode.

Edit: it worked at first, and now it's not. I can't tell what's changed. Argh.

I figured out what the difference is. If metro is already running when launching the app from within XCode, then it runs. If XCode launches metro, then it results in Error: Unable to resolve module ./src/main...

[curthipster]

Another observation: the same behavior is there when running on a physical device from XCode. That is, if XCode launches metro then you see the error in the app, and if you launch metro via nx first, it works.

[chrismcleod]

I think this happens bc of this

if you echo $THIS_PATH in launchPackager.command, it's the root of the monorepo, not the apps/appName directory. This is probably bc of the symlinked node_modules folder.

I added/used a custom launch command file in the root of the app folder and it works.

apps/MyCoolApp/launch.command

cd "$(dirname "$0")" && yarn nx start "MyCoolApp"

Update the Xcode launch script: open "$SRCROOT/../launch.command" || echo "Can't start packager automatically"

Probably not the best long-term solution.

[aureliopetrone]

Is there any update for this? I made it working writing the absolute path of the app in the file packager.sh

# Application root directory - General use case: react-native is a dependency PROJECT_ROOT="$THIS_DIR/../../../packages/appName"

but it doesn't seem a good solution since I need to patch it at every modules install

[kaaterskil]

Temporary solution by @aureliopetrone works for me, but anxiously awaiting a permanent fix. @FrozenPandaz Where is this is the backlog?

[xiongemi]

there is no easy way fixing it. the quick workaround is just in another terminal, run nx start mobile before run the app in the xcode.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.