React-native: 0.63 upgrade results in a bundle that never finishes building

[djMax]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I can no longer build a react bundle, it gets to "Done copying assets" and then never finishes.

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 813.83 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.17.0 - ~/.nvm/versions/node/v12.17.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.17.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0
      System Images: android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_231 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: 0.63.0 => 0.63.0
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

I'm not sure I can reliably repro this, so I probably need some steps that might yield more data. But I run this:

npx react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js

Also, in case it's relevant, I have a monorepo setup with yarn workspaces and lerna.

Expected Results

A bundle should be produced in something less than an hour, which is how long I waited...

[djMax]

A little more info - this has something to do with a custom metro transformer I have written to do localization. Even if I reduce it to this:

const upstreamTransformer = require('metro-react-native-babel-transformer');

module.exports.transform = function transform({ src, filename, options }) {
  return upstreamTransformer.transform({ src, filename, options });
};

It will hang.

[ioveracker]

I'm also facing issues with the bundler on 0.63 in two projects, but it might be a slightly different issue because I'm promptly getting errors while bundling for release. One is a yarn workspaces / Lerna monorepo, but the other is not. Both use babel-plugin-module-resolver to resolve modules using shortened absolute paths. The release notes don't seem to have much in the way of bundler changes, but the same config bundles just fine on 0.62.2. Has anyone come across any changes relevant to bundling in 0.63.0?

The closest I've found to what I'm experiencing is being discussed in this StackOverflow question, in case any of this is useful for you.

[sharifhh]

Change your babel.config.js to .babelrc.js and it will work

[typester]

I have the same issue to @ioveracker's, not sure it's the same as the original issue of this thread though.

With 0.63 and babel-plugin-module-resolver, it seems that jsbundle won't created from ./ios directory (where Xcode execute react-native scripts). It works on root directory of the react-native project though.

So I did a temporary quick fix to add cd $PROJECT_DIR/.. before the "$NODE_BINARY" $NODE_ARGS "$CLI_PATH" $BUNDLE_COMMAND \ line on node_modules/react-native/scripts/react-native-xcode.sh

I don't know why this is happened, and hope will fix soon!

[Toppole69]

- - - Z__

[ioveracker]

@typester good call! That works! 🎉 To be clear, in my case, rather than patch node_modules/react-native/scripts/react-native-xcode.sh, I added cd $PROJECT_DIR/.. to the first line of the Bundle React Native code and images Build Phase in Xcode. I.e.:

cd $PROJECT_DIR/..
export NODE_BINARY=node
./node_modules/react-native/scripts/react-native-xcode.sh

[makarkotlov]

I'm also facing issues with the bundler on 0.63 in two projects, but it might be a slightly different issue because I'm promptly getting errors while bundling for release. One is a yarn workspaces / Lerna monorepo, but the other is not. Both use babel-plugin-module-resolver to resolve modules using shortened absolute paths. The release notes don't seem to have much in the way of bundler changes, but the same config bundles just fine on 0.62.2. Has anyone come across any changes relevant to bundling in 0.63.0?

The closest I've found to what I'm experiencing is being discussed in this StackOverflow question, in case any of this is useful for you.

same, in my case bundler can't resolve files with absolute path, but it works on 0.62.2, weird

[SimoneCarnio]

I'm also usingbabel-plugin-module-resolver and I fixed this issue by removing from my .bablerc.js this line:

cwd: 'babelrc',

[todorone]

Unfortunately, cd $PROJECT_DIR/.. doesn't work with SENTRY setup as it has own script layer over react-native-xcode.sh... 😿

[deserthurricane]

I have this issue while archiving app in XCode for distribution to AppStore. When I'm in debug mode - everything works fine.
For me the solution of @ioveracker worked for the archive build, but I'm looking forward to a new patch release of RN to fix this issue.

[maxvw]

Unfortunately, cd $PROJECT_DIR/.. doesn't work with SENTRY setup as it has own script layer over react-native-xcode.sh... 😿

@todorone This version worked for us with Sentry using the workaround @typester previously mentioned;

cd $PROJECT_DIR/..
export SENTRY_PROPERTIES=ios/sentry.properties
export NODE_BINARY=$(which node)
./node_modules/@sentry/cli/bin/sentry-cli react-native xcode ./node_modules/react-native/scripts/react-native-xcode.sh

[carolinafbarros]

I confirm that @typester suggestion works but there are plans for a definitive fix?

[lorenzoangelini]

@maxvw I tried your solution but i have the following error:
error: An organization slug is required (provide with --org)
Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output.
Please attach the full debug log to all bug reports.
* ARCHIVE FAILED *
The following build commands failed:
PhaseScriptExecution Bundle\ React\ Native\ code\ and\ images /Users/runner/Library/Developer/Xcode/DerivedData/appname-ffzaoljnipttnvctkayyjbwaowdo/Build/Intermediates.noindex/ArchiveIntermediates/liberyRelease/IntermediateBuildFilesPath/libery.build/Release-iphoneos/appName.build/Script-00DD1BFF1BD5951E006B06BC.sh

in Build Phase Bundle React Native code and images i have this:
cd $PROJECT_DIR/..
export SENTRY_PROPERTIES=sentry.properties
export EXTRA_PACKAGER_ARGS="--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map"
export BUNDLE_COMMAND="ram-bundle"
export NODE_BINARY=node
./node_modules/@sentry/cli/bin/sentry-cli react-native xcode ./node_modules/react-native/scripts/react-native-xcode.sh

[maxvw]

@maxvw I tried your solution but i have the following error:
error: An organization slug is required (provide with --org)
Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output.

Make sure export SENTRY_PROPERTIES=sentry.properties is pointing to the correct file, in my example this file exists inside the ios/ directory so the value for this environment variable is ios/sentry.properties

[lorenzoangelini]

@maxvw Thank you very much, your suggestion resolved my issue.
However I hope that this issue will be fixed in the next release

[rnnyrk]

Still having this issue. Changing the code to:

cd $PROJECT_DIR/..
export NODE_BINARY=node
./node_modules/react-native/scripts/react-native-xcode.sh

Doesn't seem to work. Anyone with another solution? 🤔

Edit:

Okay I've resolved the issue by index.ts after my xcode script line. Since I'm using Typscript I've found the script initially looks for a .js file instead of my .ts file

cd $PROJECT_DIR/..
export NODE_BINARY=node
./node_modules/react-native/scripts/react-native-xcode.sh index.ts

[ioveracker]

@rnnyrk oof, that must have been fun to track down.

Heads up: the React Native docs on using TypeScript recommend leaving index.js as .js.

You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.

I don't know if there will be other problems beyond bundling, but thought I'd toss that out there. 🤷‍♂️

[rnnyrk]

@ioveracker Thanks for the heads up about this one. I dind't know about it and never ran into the docs page. Will revert since it, indeed, doesn't add any value to make the index file ts

[aprilmintacpineda]

@typester good call! That works! 🎉 To be clear, in my case, rather than patch node_modules/react-native/scripts/react-native-xcode.sh, I added cd $PROJECT_DIR/.. to the first line of the Bundle React Native code and images Build Phase in Xcode. I.e.:

cd $PROJECT_DIR/..
export NODE_BINARY=node
./node_modules/react-native/scripts/react-native-xcode.sh

this worked perfectly.

[vrgimael]

None of the above fixed it for me on 0.63, but it works with this PR https://github.com/facebook/react-native/pull/29477

[zaporozhetsAnton]

Unfortunately, cd $PROJECT_DIR/.. doesn't work with SENTRY setup as it has own script layer over react-native-xcode.sh... 😿

@todorone This version worked for us with Sentry using the workaround @typester previously mentioned;

cd $PROJECT_DIR/..
export SENTRY_PROPERTIES=ios/sentry.properties
export NODE_BINARY=$(which node)
./node_modules/@sentry/cli/bin/sentry-cli react-native xcode ./node_modules/react-native/scripts/react-native-xcode.sh

Thank you so much for this solution @maxvw

[tlmader]

Unfortunately, cd $PROJECT_DIR/.. doesn't work with SENTRY setup as it has own script layer over react-native-xcode.sh... 😿

@todorone This version worked for us with Sentry using the workaround @typester previously mentioned;

cd $PROJECT_DIR/..
export SENTRY_PROPERTIES=ios/sentry.properties
export NODE_BINARY=$(which node)
./node_modules/@sentry/cli/bin/sentry-cli react-native xcode ./node_modules/react-native/scripts/react-native-xcode.sh

Can confirm this worked for me. I'm running RN 0.63.2 in a Lerna monorepo.

[ramonvermeulen]

@typester good call! That works! 🎉 To be clear, in my case, rather than patch node_modules/react-native/scripts/react-native-xcode.sh, I added cd $PROJECT_DIR/.. to the first line of the Bundle React Native code and images Build Phase in Xcode. I.e.:

cd $PROJECT_DIR/..
export NODE_BINARY=node
./node_modules/react-native/scripts/react-native-xcode.sh

For some reason this doesn't seem to work for me.

My monorepo project structure

• node_modules
  
  
  
  • react-native
  
  
  • ... other node modules
  
  
• package.json
• packages
  
  
  
  • mobile
    
    
    
    
    
    • ios
    
    
    
    • android
    
    
    
    • src
    
    
    
    • index.js
    
    
    
    • ... other mobile resources
    
    
    
  
  
  • shared
    
    ... shared sources
  
  
  • web
    
    ... web sources
  
  

In my build phase I have:

cd $PROJECT_DIR/..    # added this line because of the suggested fix
export NODE_BINARY=node
export CLI_PATH=./cli.js
../../../node_modules/react-native/scripts/react-native-xcode.sh

(if I do cat ../../../node_modules/react-native/scripts/react-native-xcode.sh from the iOS (packages/mobile/ios) directory the file does exist, so that is not the problem)

Besides that, if I run react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' for example from the packages/mobile directory it builds the main.jsbundle to the packages/mobile/ios directory, so that works.

Any ideas? Or am I missing something?

EDIT:
I ended up removing the CLI_PATH environment variable and changing the path for the node_modules, because after and cd $PROJECT_DIR/.. the location is of course different.
Ended up with the following config:

cd $PROJECT_DIR/..
export NODE_BINARY=node
../../node_modules/react-native/scripts/react-native-xcode.sh

Note: This config will only work with my monorepo folder hierarchy, use the fix mentioned earlier if you do not use such a monorepo structure.

[CaM2091]

Upgrade to v0.63.3. It's now fixed

Changelog of v0.63.3 :

• Fix "main.jsbundle does not exist" issue (83777cb)

[ioveracker]

Upgrade to v0.63.3. It's now fixed

Changelog of v0.63.3 :

• Fix "main.jsbundle does not exist" issue (83777cb)

Good to know! Does anyone know if the workarounds mentioned in this thread need to be undone after updating to [email protected]?

EDIT: I shipped a build on 0.63.3 _without_ undoing the script workarounds mentioned in this thread, so it seems that it's not harmful to leave in place.

[aprilmintacpineda]

After upgrading to new version, I got this

When I try to upgrade, most of the time I would be cornered to a point where, "damn, I'll just create a new react-native project and then copy-paste my codes there and reconfigure it", I haven't had an upgrade that worked smoothly (unless it's a patch where only a few lines changed)

Plus, when you've already modified your project, the upgrade will often fail, especially with ios, if you have already configured your ios project to run on multiple environments (UAT,STG, etc), then it gets worst.

[sidferreira]

I think it is not launching the server automatically

[ramonvermeulen]

• 83777cb

This fixes the issue for people that do NOT use a monorepo, it basically reverts the monorepo functionality.

For the users that ARE using a monorepo this is a quick fix:

• update to 0.63.3 and edit line 63 in the node_modules/react-native/scripts/react-native-xcode.sh
PROJECT_ROOT=${PROJECT_ROOT:-"$REACT_NATIVE_DIR/../.."} to PROJECT_ROOT=${PROJECT_ROOT:-"$REACT_NATIVE_DIR/../../<path_to_your_react_native_root>"}
• Edit the Bundle React Native code and images build phase to the correct relative path of the sh script. node_modules/react-native/scripts/react-native-xcode.sh For example for me it was three parents:

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

OR

• stay on 0.63.2

I agree, this is not a nice fix, and I strongly suggest that the monorepo support should be added back in some way. For me because of the ^ in my package.json it automatically updated, and I had to put in several hours to figure out that this was the actual issue.

[rafaelmonroy]

Upgrade to v0.63.3. It's now fixed

Changelog of v0.63.3 :

• Fix "main.jsbundle does not exist" issue (83777cb)

This worked me 💪🏽 for the issue: main.jsbundle does not exist when archiving build on Xcode. I did not do anything else but upgrade to successfully build an app store bundle.

[eridr]

In my case it was all about giving xcode full access to the harddrive.
Select System Preferences->Security & Privacy->Full Disk Access