Skip to content

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

New issue
New issue
Closed
Closed
Hermes transforms not enabled by default when creating a new 0.70.0 project#34656
Labels
Impact: CrashPlatform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.Tech: HermesHermes Engine: https://hermesengine.dev/

Description

@steveluscher
steveluscher
opened on Sep 11, 2022

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

Activity

  1. steveluscher
    added
    Needs: Triage 🔍
    on Sep 11, 2022
  2. react-native-bot
    added
    API: Transforms
    on Sep 11, 2022

  3. jcoulaud commented on Sep 11, 2022

    @jcoulaud
    jcoulaud
    on Sep 11, 2022

    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'

  4. kelset
    added
    Tech: HermesHermes Engine: https://hermesengine.dev/
    on Sep 13, 2022

  5. kelset commented on Sep 13, 2022

    @kelset
    kelset
    on Sep 13, 2022
    Contributor

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

  6. kelset
    added
    Platform: iOSiOS applications.
    Impact: Crash
    and removed
    Needs: Triage 🔍
    API: Transforms
    on Sep 13, 2022

  7. lexer commented on Sep 19, 2022

    @lexer
    lexer
    on Sep 19, 2022

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

  8. steveluscher commented on Sep 20, 2022

    @steveluscher
    steveluscher
    on Sep 20, 2022
    ContributorAuthor

    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.

  9. huntie commented on Sep 20, 2022

    @huntie
    huntie
    on Sep 20, 2022
    Collaborator

    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.

  10. motiz88 commented on Sep 20, 2022

    @motiz88
    motiz88
    on Sep 20, 2022
    Contributor

    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 react/metro#871, which will be part of the next Metro version.

  11. facebook-github-bot
    added a commit that references this issue on Sep 21, 2022

    metro-react-native-babel-preset: Remove exponentiation operator trans…

    c2365bb

  12. kelset commented on Oct 4, 2022

    @kelset
    kelset
    on Oct 4, 2022
    Contributor

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

  13. motiz88 commented on Oct 4, 2022

    @motiz88
    motiz88
    on Oct 4, 2022
    Contributor

    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)

  14. github-actions commented on Apr 9, 2023

    @github-actions
    github-actionsBot
    on Apr 9, 2023

    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.

  15. github-actions
    added
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Apr 9, 2023

  16. github-actions commented on Apr 16, 2023

    @github-actions
    github-actionsBot
    on Apr 16, 2023

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

  17. github-actions
    closed this as completedon Apr 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Impact: CrashPlatform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.Tech: HermesHermes Engine: https://hermesengine.dev/

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions