[monorepo] bundling doesn't work (workaround available)

[xzilja]

To kick off: I also posted clone of this issue in rn repo facebook/react-native#26259

Although I'm almost sure that it is related to cli somehow due to errors that get output. My instinct is either something changed to platform flag where ios value is invalid or due to usage of multiple cli paths while archiving. Full details below. If this does sound like a cli issue, I'll close one in rn, if not will do vice versa.

React Native version:

System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 362.14 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/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
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild

Steps To Reproduce

1. Choose Generic iOS Device as your build target
2. Clean build folder
3. Archive (Should archive build without issues, but fails)

Error

Towards the end of the build following error pops up, tried cleaning derived data and caches, but this happens consistently:

TL;DR I think actionable bits are error Invalid platform "ios" selected. and main.jsbundle does not exist.

Also looks like cli commands are ran from different directories, both of these are present in the output: /node_modules/react-native/cli.js and /node_modules/@react-native-community/cli

I've started getting this error when I upgraded from 0.59 to 0.61rc. What confuses me is that my normal "DEBUG" builds are working fine.

Showing All Errors Only
:-1: + BUNDLE_FILE=/Users/ilja/Library/Developer/Xcode/DerivedData/myTestApp-fluhnhqokfrubpemalkqqwtmqwql/Build/Intermediates.noindex/ArchiveIntermediates/myTestAppDevelopment/BuildProductsPath/Release-iphoneos/myTestAppDevelopment.app/main.jsbundle

:-1: + node /Users/ilja/Documents/GitHub/myTestApp/node_modules/react-native/cli.js bundle --entry-file packages/myTestApp-app/index.js --platform ios --dev false --reset-cache --bundle-output /Users/ilja/Library/Developer/Xcode/DerivedData/myTestApp-fluhnhqokfrubpemalkqqwtmqwql/Build/Intermediates.noindex/ArchiveIntermediates/myTestAppDevelopment/BuildProductsPath/Release-iphoneos/myTestAppDevelopment.app/main.jsbundle --assets-dest /Users/ilja/Library/Developer/Xcode/DerivedData/myTestApp-fluhnhqokfrubpemalkqqwtmqwql/Build/Intermediates.noindex/ArchiveIntermediates/myTestAppDevelopment/BuildProductsPath/Release-iphoneos/myTestAppDevelopment.app

:-1: error Invalid platform "ios" selected.

:-1: info Available platforms are: "native". If you are trying to bundle for an out-of-tree platform, it may not be installed.

:-1: error Bundling failed. Run CLI with --verbose flag for more details.

:-1: Error: Bundling failed

:-1:     at buildBundle (/Users/ilja/Documents/GitHub/myTestApp/node_modules/@react-native-community/cli/build/commands/bundle/buildBundle.js:80:11)

:-1:     at async Command.handleAction (/Users/ilja/Documents/GitHub/myTestApp/node_modules/@react-native-community/cli/build/cliEntry.js:160:7)

:-1: + [[ false != true ]]

:-1: + [[ ! -f /Users/ilja/Library/Developer/Xcode/DerivedData/myTestApp-fluhnhqokfrubpemalkqqwtmqwql/Build/Intermediates.noindex/ArchiveIntermediates/myTestAppDevelopment/BuildProductsPath/Release-iphoneos/myTestAppDevelopment.app/main.jsbundle ]]

:-1: + echo 'error: File /Users/ilja/Library/Developer/Xcode/DerivedData/myTestApp-fluhnhqokfrubpemalkqqwtmqwql/Build/Intermediates.noindex/ArchiveIntermediates/myTestAppDevelopment/BuildProductsPath/Release-iphoneos/myTestAppDevelopment.app/main.jsbundle does not exist. This must be a bug with'

:-1: File /Users/ilja/Library/Developer/Xcode/DerivedData/myTestApp-fluhnhqokfrubpemalkqqwtmqwql/Build/Intermediates.noindex/ArchiveIntermediates/myTestAppDevelopment/BuildProductsPath/Release-iphoneos/myTestAppDevelopment.app/main.jsbundle does not exist. This must be a bug with

:-1: + echo 'React Native, please report it here: https://github.com/facebook/react-native/issues'

:-1: React Native, please report it here: https://github.com/facebook/react-native/issues

:-1: + exit 2

[Esemesek]

I have initialized a new project from cli master branch and everything is working just fine. It seems like you're having issue with this line of code. Do you have any custom platform configurations that might cause those issues? Can you paste your react-native.config.js? It would be useful if you create a repository with the reproduction of this issue.

[xzilja]

@Esemesek just tried it with new project and it is working for me as well. So I am now trying to figure out if there are any specifics in my project causing this.

As it is now:

1. I'm not using any custom platform
2. My project doesn't have react-native.config.js (I assume it would be using default one?)

Only difference compared vanilla "rn" project is that I'm within monorepo environment i.e.

packages/
  myTestApp-app/
     index.js (my entry file)
  myTestApp-ios/
     AppDelegate.m
     myTestApp.xcworkspace
     ....

But this was not an issue previously and I've been using CocoaPods for a few previous versions before.

My project is updated to run Bundle React Native code and images respectively

export NODE_BINARY=node
../../node_modules/react-native/scripts/react-native-xcode.sh packages/myTestApp-app/index.js

Same goes for referencing entries in AppDelegate

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
#if DEBUG
  return
      [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"packages/myTestApp-app/index"
                                                     fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

Does anything jump to mind? If not, I will try to get small replica of my repo set up with that error, as my current one is private project.

[thymikee]

You're in a monorepo, that's very important information. If you run your RN app from root of the project, you'll currently need to add react-native to your root package.json dependencies. We're working on better monorepo integration, but not there yet.

[xzilja]

@thymikee yeh, not sure how I forgot to include that bit of info, my bad.

react-native package is located in my root node_modules folder (just checked). It is, however, installed from packages/myTestApp-app/package.json, but it is not nohoisted, does this satisfy your requirement?

This setup works on 0.59, was throwing haste map errors in 0.60, and seems to be fine on 0.61, just not archiving release bit

[Esemesek]

@iljadaderko I am currently working with monorepo project. From my experience, it is better to no-hoist all the packages that are linked/autolinked.

    "nohoist": [
      "**/react-native",
      "**/react-native-*",
      "**/@react-native-community/*",
    ]

[xzilja]

I'll give this approach a try, I think in rn 0.61 they got rid of haste, so nohoist is no longer necessary? I also don't have auto linked deps, just few manually added cocoapod ones.

Never the less, this seems to be specific to my project, so will keep digging.

Just out of curiosity is your monorepo project working on 0.61rc @Esemesek ?

[Esemesek]

@iljadaderko nope. We are using on 0.60.5.

[xzilja]

Alright, I'll keep digging into my issue, will report here if I find anything interesting. Thank you for your time guys, this seems like something specific to my project.

[brunolemos]

@iljadaderko I have the same issue (brunolemos/react-native-web-monorepo#16), how did you fix?

[xzilja]

@brunolemos move react-native to root package.json, it has to be there in order for cli to apply ios and android as platforms here

cli/packages/cli/src/tools/loadMetroConfig.js

Line 38 in 708211a

platforms: [...ctx.haste.platforms, 'native'],

I've been told better monorepo support is coming soon.

[devagul93]

I have the same setup as @brunolemos
adding react-native to root package.json did resolve it but I have little ideas as to why.

[thymikee]

@devagul93 it's because of how CLI looks for deps to look for (takes those from package.json and from react-native.config.js). We want to come up with a more ergonomic solution.

[CaptainJeff]

I'm sorry @devagul93 or @iljadaderko can you help me understand what you mean by "adding react-native to root package.json"

[thymikee]

Adjust the package.json in the root directory of your project where you run yarn react-native ... from, to look like this:

"dependencies": {
+  "react-native": "*",
   "other-package": "1.2.3"

[CaptainJeff]

@thymikee thanks! I'll give this a try right now and report back

[CaptainJeff]

I misread your note. I thought you had this under "devDependencies"

I have

"dependencies": {
 "react-native": "0.60.5",
   "other-package": "1.2.3"

And i'm still getting the main.jsbundle does not exist. any other considerations you have or anything I should try that you can think of?

[Federkun]

Had the same issue on android, fixed by changing the cliPath:

project.ext.react = [
    entryFile: "packages/mobile/index.js",
    enableHermes: false,  // clean and rebuild if changing
    root: "../../../../",
    cliPath: "./cli.js" <--- add this
]

and create a cli.js in the root folder of the mono repo:

process.chdir('./packages/mobile')

var cli = require('@react-native-community/cli')
cli.run()

I never had the chance to check ios.

[grabbou]

I stumbled upon this issue and I think it's because in a monorepo the react-native-xcode.sh will set the root to root, where react-native is actually located within a package.

Reopening to fix.

[Titozzz]

I've had to add export PROJECT_ROOT="$PROJECT_DIR/.." inside the xcode step

[vasihc]

Adjust the package.json in the root directory of your project where you run yarn react-native ... from, to look like this:

"dependencies": {
+  "react-native": "*",
   "other-package": "1.2.3"

It's alive!!! Thanks a lot

[mouxuefei]

Had the same issue on android, fixed by changing the cliPath:

project.ext.react = [
    entryFile: "packages/mobile/index.js",
    enableHermes: false,  // clean and rebuild if changing
    root: "../../../../",
    cliPath: "./cli.js" <--- add this
]

and create a cli.js in the root folder of the mono repo:

process.chdir('./packages/mobile')

var cli = require('@react-native-community/cli')
cli.run()

I never had the chance to check ios.

thanks,solve my problem

[yuzhakovvv]

@Titozzz thanks, this iOS workaround helped.

In my case for Android it was:

project.ext.react = [
    ...
    entryFile: "index.js",
    cliPath: "../node_modules/react-native/cli.js",
]

Because project structure is:

node_modules/
- react-native/
mobile/
- node_modules/
- index.js
shared/
web/

Also related issue #877 comment with same workadounds

[americosavinon]

The solution for adding react-native as dependency in the root node_modules worked for me (using React Native 0.61.5)

[grabbou]

The source of errors is this line https://github.com/facebook/react-native/blob/master/scripts/react-native-xcode.sh#L59-L61 that assumes cd ../../ from node_modules/react-native will always get you to the root (false for monorepo).

The solution is to explicitly export PROJECT_ROOT from Xcode. I will provide documentation on that in a second.

[grabbou]

Looks like we can safely revert this commit facebook/react-native@9ccde37 and things will work automatically without any PROJECT_ROOT.

For now, the correct way of configuring is to set:

export NODE_BINARY=node
export PROJECT_ROOT=$PWD/..
../../../node_modules/react-native/scripts/react-native-xcode.sh

in a monorepo.

Please do not use the other workaround provided. It's wrong.

[grabbou]

I am going to continue the discussion over facebook/react-native@9ccde37 with @janicduplessis to understand whether we can safely remove it.

[grabbou]

If you're using previous workaround, please check how to migrate onto the standard and approved solution in this PR: brunolemos/react-native-web-monorepo#52

[manish2612]

Looks like we can safely revert this commit facebook/react-native@9ccde37 and things will work automatically without any PROJECT_ROOT.

For now, the correct way of configuring is to set:

export NODE_BINARY=node
export PROJECT_ROOT=$PWD/..
../../../node_modules/react-native/scripts/react-native-xcode.sh

in a monorepo.

Please do not use the other workaround provided. It's wrong.

My current project structure of monorepo is:

node_modules
packages
      /components
      /RN-app

react-native dependency is part of RN-app package.json.
Adding script line as suggest by @grabbou fixed the Archive build problem.
Thanks! 👍🏻

[yaroslavnikiforov]

@grabbou, where do you add these lines?

export NODE_BINARY=node
export PROJECT_ROOT=$PWD/..
../../../node_modules/react-native/scripts/react-native-xcode.sh

[liamjones]

@yaroslavnikiforov This is in the 'Bundle React Native code and images' build phase script in Xcode.

You may not need to do it anymore though in a modern version of RN (and that script has changed a bit to call a with-environment.sh first). With 0.71 in our monorepo we just have to fix the relative links in the build phase (and a customisation to the AppDelegate.mm to change the jsBundleURLForBundleRoot, it doesn't need a manually set PROJECT_ROOT anymore:

[yaroslavnikiforov]

@liamjones, great thanks!

[giladm]

@liamjones I am running RN 71.7, and have the same issue: error Invalid platform "ios" selected
I can't build for iOS devices in monorepo environment (The app does work on Simulator using react-native run-ios --simulator='iPhone 13'). My issue started when I updated the OS, then forced to update Xcode. At that point, it failed to compiler on iOS. My development environment:
M1, OSX Sonoma 14.2
Xcode v15.2
node v20.7.0
ruby v2.6.10

I checked scripts/react-native-xcode.sh and it has the change that @grabbou gave:
PROJECT_ROOT=${PROJECT_ROOT:-"$REACT_NATIVE_DIR/../.."}

I didn't understand in your comment the jsBundleURLForBundleRoot part in AppDelegate.
In my AppDelegate I have:
#if DEBUG
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

[liamjones]

@giladm the AppDelegate edit we made is along the lines of:

return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"packages/app-package-name/index"];

That isn't your problem though (well, not yet). If it's complaining ios in an invalid platform then the RN CLI can't find the RN CLI iOS package. One has probably been hoisted to monorepo/node_modules while the other is somewhere like packages/app-package-name/node_modules. Make sure you have a react-native dependency in your root workspace package.json as well as your app's package.json and rerun yarn install. That should ensure they both end up in the root node_modules directory.