JSParserImpl.cpp: invalid property name - must be a string, number or identifier

[pax-k]

Minimal reproducible example

https://github.com/pax-k/jazz-rn-babel-issue

What platform(s) does this occur on?

Android, iOS, Web

Where did you reproduce the issue?

in a development build

Summary

Even if @babel/plugin-transform-class-static-block is added to babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-transform-class-static-block",
      [
        "@tamagui/babel-plugin",
        {
          components: ["tamagui"],
          config: "./config/tamagui.config.ts",
          logTimings: true,
          disableExtraction: process.env.NODE_ENV === "development",
        },
      ],
    ],
  };
};

When running the Metro bundler, expo export --platform ios fails with:

SyntaxError: SyntaxError: /Users/pax/Documents/Repos/jazz-rn-babel-issue/node_modules/jazz-tools/dist/native/coValues/coMap.js: invalid property name - must be a string, number or identifier (37:11)
    static {
           ^

  35 |  *  */
  36 | export class CoMap extends CoValueBase {
> 37 |     static {
     |            ^
  38 |         this.prototype._type = "CoMap";
  39 |     }

The error comes from Hermes: https://github.com/facebook/hermes/blob/b07ef4fc10dd53ad542f811040c820064c5ceb57/lib/Parser/JSParserImpl.cpp#L3131

This works in Expo SDK 51 (example here)

Environment

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 15.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v18.18.2/bin/yarn
      npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
      Watchman: 2024.09.09.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.13.0 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 24.0, iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, watchOS 11.0
    IDEs:
      Android Studio: 2022.3 AI-223.8836.35.2231.10671973
      Xcode: 16.0/16A242d - /usr/bin/xcodebuild
    npmPackages:
      expo: ~52.0.0-preview.5 => 52.0.0-preview.5 
      expo-router: ~4.0.0-preview.3 => 4.0.0-preview.3 
      react: 18.3.1 => 18.3.1 
      react-dom: 18.3.1 => 18.3.1 
      react-native: 0.76.0 => 0.76.0 
      react-native-web: ~0.19.13 => 0.19.13 
    npmGlobalPackages:
      eas-cli: 12.5.1
    Expo Workflow: managed

Expo Doctor Diagnostics

❯ npx expo-doctor@latest
✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check native tooling versions
✔ Check if the project meets version requirements for submission to app stores
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check for app config fields that may not be synced in a non-CNG project
✔ Check for issues with Metro config
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Validate packages against React Native Directory package metadata

    ➡ [tamagui] built config and components (563ms)
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

[tmikov]

That's correct, the Hermes parser doesn't currently support static blocks. We are adding them.

[pax-k]

@tmikov Why did this work in the past versions? Now it seems that @babel/plugin-transform-class-static-block doesn't transform anymore.

[tmikov]

@pax-k this was never supported by the Hermes parser. We have a diff in progress, it should land very soon.

I am not closely familiar with the RN Babel setup, but in previous versions you probably weren't using the Hermes parser at all. I believe recently RN switched to the Hermes parser, because it supports extended Flow features and is faster (since it is written in C++).