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.

[kelset]

hey @motiz88 just to double-check, is it safe to say that this will be addressed in Metro 73 in RN71, by this commit facebook/metro@c2365bb ?

[motiz88]

hey @motiz88 just to double-check, is it safe to say that this will be addressed in Metro 73 in RN71, by this commit facebook/metro@c2365bb ?

The BigInt issue that @steveluscher was having will be fixed in the default config at that point, yes. There will be no change to the experimental, unsupported transformProfile feature at this stage. (We are however exploring better designs for this, e.g adopting @babel/preset-env)

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.