CODEWITHSUNDEEP
iosreact-native
Mario
Mario

Reputation: 2505

Added Xcode configurations in React Native cannot connect to Metro

I've added additional configurations in Xcode, for my React Native project, to manage different bundle ID's and environments. My problem is that the newly added configurations cannot connect to Metro. They install and run on the simulator just fine.

To be clear, like all React Native projects my project started off with default "Debug" and "Release" configurations. They still work. For example if I run either of the following two commands, the app will run on the simulator and connect to Metro just fine:

npx react-native run-ios

Or:

npx react-native run-ios --configuration "Debug"

Either of the above runs the app just as always (with the default, production, bundle ID I started my project with). But I added a few more configurations for the various environments: development, alpha, and QA (a dev and release for each of the three). So, for example, if I run this command, the app still runs on the simulator just fine, but will not connect to Metro:

npx react-native run-ios --configuration "Dev Debug"

My big clue is this. Take a look at this screen shot, produced when my app does connect successfully to Metro:

Illustrates the "BUNDLE ./index.js" running

The BUNDLE ./index.js line never appears when my app fails to connect to Metro. I don't know what exactly produces that line or in what script to find this, but my hunch is that the problem is right there.

Any ideas how I can get my newly added configurations to connect to Metro, just like the existing default ("Debug") configuration?

EDIT:

I have determined that the same thing happens if I run the app directly from Xcode, depending on what Build Configuration I choose in the Run setting of the Scheme:

Xcode build configurations in Scheme

If I select "Debug," the app attaches to Metro. Otherwise, the new configurations do not.

Upvotes: 3

Views: 3345

Answers (1)

Mario
Mario

Reputation: 2505

The solution here is to tell Cocoapods that you have created these new configurations.

The Cocoapods documentation mentions using custom build configurations:

https://guides.cocoapods.org/syntax/podfile.html#project

You have to map your new configurations to a symbol describing where they came from. So, under the "target" section of my Podfile, I added the following:

  project 'Insert_Your_Project_Name',
      'Debug' => :debug,
      'Dev Debug' => :debug,
      'Alpha Debug' => :debug,
      'QA Debug' => :debug,
      'Release' => :release,
      'Dev Release' => :release,
      'Alpha Release' => :release,
      'QA Release' => :release

In the above, each configuration is mapped to a symbol representing one of the two original configurations, "Debug" or "Release" (:debug or :release).

That's all it takes to solve the problem!

As a side note, I had originally been thrown off track by another error that I had solved with a hack. However, the above fixes that error, too, and makes the hack unnecessary. That problem had to do with a "No bundle URL present" error:

No bundle URL present (react native)

The error comes from the main.jsbundle file not being generated. Your app won't even run without that. The hack I used suggested manually generating your own. I advise against that. The fix I've described above restores (I believe it's) Metro's ability to create the bundle.

I also have to give a hat tip to the following article, which clued me in to having to coordinate the configurations with Cocoapods:

https://orjpap.github.io/xcode/ios/swift/cocoapods/2020/04/20/iOS-build-schemes.html

Hope my answer helps someone in a similar situation!

Upvotes: 4

Related Questions