Hermes transforms not enabled by default when creating a new 0.70.0 project

[steveluscher]

Description

I can tell that the Hermes Babel transforms are not enabled in brand new 0.70.0 projects.

Version

0.70.0

Output of npx react-native info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 112.94 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
    Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8512546
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    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

Steps to reproduce

1. Create a new project

   npx react-native@0.70.0 init ExampleApp
   cd ExampleApp
   

2. Add the following code to App.js

   console.log(2n ** 42n);
   

3. Start the project

   yarn android
   

Observe that the app crashes with:

 ERROR  TypeError: Cannot convert BigInt to number

This is because the project is using the non Hermes transforms that convert the code you added to this invalid code:

Math.pow(2n, 42n);  // You can't use `Math.pow` with `BigInt`!

The workaround is to enable the transforms in babel.config.js, but it would be preferable if 0.70.0 did this by virtue of Hermes being enabled:

module.exports = {
   presets: [
     [
       'module:metro-react-native-babel-preset',
       {unstable_transformProfile: 'hermes-stable'},
     ],
   ],
};

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/haG_X4VvG

[jcoulaud]

I agree, I have the same problem. However, if I add

{unstable_transformProfile: 'hermes-stable'}

to my babel config , I can't archive my project anymore with Xcode. Is it the same for you?

error: File /Users/julien/Library/Developer/Xcode/DerivedData/test-bwyhfbhfgywuwjdqadmluvempaqw/Build/Intermediates.noindex/ArchiveIntermediates/test/BuildProductsPath/Release-iphoneos/test.app/main.jsbundle does not exist. This must be a bug with React Native, please report it here: https://github.com/facebook/react-native/issues'

[kelset]

Can confirm that this repro generates the error - I'll be passing this on the Hermes team so that they can help.

[lexer]

@kelset is there any update or another issue we should track?

[steveluscher]

Yeah, interesting. I just tried this myself. The build step when you do Project > Archive is created in , and ends up looking like this:

/usr/local/bin/node ~/CoolApp/node_modules/react-native/cli.js bundle \
  --entry-file index.js \
  --platform ios \
  --dev false \
  --reset-cache \
  --bundle-output ~/Library/Developer/Xcode/DerivedData/CoolApp-dojpytdqmhmaybedexygpywnffzi/Build/Intermediates.noindex/ArchiveIntermediates/CoolApp/BuildProductsPath/Release-iphoneos/main.jsbundle \
  --assets-dest ~/Library/Developer/Xcode/DerivedData/CoolApp-dojpytdqmhmaybedexygpywnffzi/Build/Intermediates.noindex/ArchiveIntermediates/CoolApp/BuildProductsPath/Release-iphoneos/CoolApp.app

If I create a .xcode.env.local file in the ios/ directory, and add this:

export USE_HERMES=true

…--minify false gets added to that command and the build works.

Essentially, node_modules/react-native/scripts/react-native-xcode.sh doesn't pick up the fact that Hermes is enabled in Podfile.

[huntie]

Thanks for the valid workarounds!

Forwarding some conversations from the team:

• We don't intend for unstable_transformProfile to be widely used, in particular because this doesn't consider the target Hermes version.
• Short term: A fix may involve exposing a new option on metro-react-native-babel-preset, and fixing react-native-xcode.sh as above.
• Medium term: We are looking at a better design for this that may include adding Hermes to browserslist and having the build system transparently respect this.

[motiz88]

To add to @huntie's comment: Longer-term solutions aside, we're looking to unblock the use of BigInt by removing the exponentiation operator transform (a ** b → Math.pow(a, b)) from metro-react-native-babel-preset altogether, given that both JSC and Hermes support this syntax natively. This will likely depend on facebook/metro#871, which will be part of the next Metro version.