SyntaxError with static blocks inside packages in React Native 0.76 / Metro 0.81.0

[lluiscab]

Do you want to request a feature or report a bug?

Bug report.

What is the current behavior?

When updating to [email protected] my app fails to bundle due to the following error:

react-native bundle --reset-cache --verbose --platform android --dev false --minify false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/```

debug Reading Metro config from <project root>/metro.config.js
 WARN  the transform cache was reset.
                Welcome to Metro v0.81.0
              Fast - Scalable - Integrated

error SyntaxError in node_modules/<redacted>/dist/index.js: invalid property name - must be a string, number or identifier (41:9)
  static {
         ^.
SyntaxError: invalid property name - must be a string, number or identifier (41:9)
  static {
         ^
    at Object.parse (<project root>/node_modules/hermes-parser/dist/HermesParser.js:91:29)
    at Object.parse (<project root>/node_modules/hermes-parser/dist/index.js:129:28)
    at Object.transform (<project root>/node_modules/@react-native/metro-babel-transformer/src/index.js:211:36)
    at transformJSWithBabel (<project root>/node_modules/metro-transform-worker/src/index.js:292:45)
    at Object.transform (<project root>/node_modules/metro-transform-worker/src/index.js:417:18)
    at transformFile (<project root>/node_modules/metro/src/DeltaBundler/Worker.flow.js:54:36)
    at Object.transform (<project root>/node_modules/metro/src/DeltaBundler/Worker.flow.js:30:10)
    at execFunction (<project root>/node_modules/jest-worker/build/workers/processChild.js:149:17)
    at execHelper (<project root>/node_modules/jest-worker/build/workers/processChild.js:137:5)
    at execMethod (<project root>/node_modules/jest-worker/build/workers/processChild.js:140:5)
    at process.messageListener (<project root>/node_modules/jest-worker/build/workers/processChild.js:44:7)
    at process.emit (node:events:518:28)
    at emit (node:internal/child_process:950:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:91:21))

node_modules/<redacted> is a internal company package built using tsup
The contents of node_modules/<redacted>/dist/index.js are as follows:

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

(...)

// src/index.ts
var import_class_transformer = require("class-transformer");
var import_class_validator = require("class-validator");
var ClassName = class {
  static {
    __name(this, "ClassName");
  }
  /* c8 ignore next 3 */
  constructor(input) {
    Object.assign(this, input);
  }
};

Contents of babel.config.js. Note that the babel plugin @babel/plugin-transform-class-static-block is loaded.

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['@babel/plugin-transform-class-static-block'],
};

Contents of metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const getMetroConfig = () => {
  const defaultConfig = getDefaultConfig(process.cwd());

  const config = {
    resolver: {
      unstable_enableSymlinks: true,
      unstable_enablePackageExports: true,

      // https://github.com/facebook/metro/issues/1073
      resolveRequest: (context, moduleName, platform) =>
        context.resolveRequest(
          {...context, resolveHastePackage: () => undefined},
          moduleName,
          platform,
        ),
    },
  };

  return mergeConfig(defaultConfig, config);
};

module.exports = getMetroConfig();

It seems like the latest version of metro bundler does not handle the static class block.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

Reproduction repo access can be granted upon request.

What is the expected behavior?

When running [email protected] and [email protected], he app bundles correctly:

debug Reading Metro config from <project root>/metro.config.js
warning: the transform cache was reset.
                Welcome to Metro v0.80.12
              Fast - Scalable - Integrated


info Writing bundle output to: android/app/src/main/assets/index.android.bundle
info Done writing bundle output
info Copying 1 asset files
info Done copying assets
Done in 8.65s.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

Metro configuration has already been provided.
Running [email protected] & [email protected].