@babel/plugin-proposal-decorators is not supported in hermes-parser - was: Broken babel preset setup with @babel/plugin-proposal-decorators and React Native 0.76.0

[lucaswitch]

Description

Since i upgraded from react-native 0.75.4 to 0.76 and the babel plugin "@babel/plugin-proposal-decorators" stopped working.

What we know:

I was not able to fix the issue by changing babel or @babel/plugin-proposal-decorators versions so probably is not something with babel setup.
I can confirm that brand new react-native 0.76.0 can not work with @babel/plugin-proposal-decorators as we can see on the reproducer.

The reproducer is a standard react-native 0.76.0 with "@babel/plugin-proposal-decorators": "^7.25.9" and a babel.config.js that i believe most of the users configure.
The reproducer can be found on:
https://github.com/lucaswitch/broken-babel-preset

I understand that it's not a problem of react-native project but is something that we can probably can be adjusted on the official babel preset.
Actually this plugin is used by a lot of developers including me and a lot of libraries need that configuration to be able to be used on a react-native project.

Steps to reproduce

I tested this issue only on IOS but i think it's not related to any platform since is a babel related problem.

I'm not a babel expert but i suspect there is something on @react-native/babel-preset that broke this configuration.
Created a little repro with a brand new bare react-native project and an small minimal decorator setup just to prove that is not transforming js syntax the right way on react-native.

React Native Version

0.76.0

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.0
  CPU: (24) x64 Intel(R) Xeon(R) CPU E5-2670 v3 @ 2.30GHz
  Memory: 30.60 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 10.9.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.10.21.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/local/opt/openjdk@17/bin/javac
  Ruby:
    version: 3.3.5
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0-alpha.2
    wanted: 15.0.0-alpha.2
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.0
    wanted: 0.76.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

ERROR  SyntaxError in index.js: unrecognized character '@' (16:2)
  @readonly
  ^
 (NOBRIDGE) ERROR  [Error: TransformError SyntaxError in index.js: unrecognized character '@' (16:2)

Reproducer

https://github.com/lucaswitch/broken-babel-preset

Screenshots and Videos

[lucaswitch]

Is that something to be fixed or unsupported?
From my point of view react-native should be able to work with all 7.x Babel plugins.

[cipolleschi]

Thanks for the issue. We are discussing how to proceed forward internally. We made some changes in the JS parsers and the new one does not support all the Babel plugins, especially the ones that are still in a proposal stage (like the decorators one, which is in stage 3).

@lucaswitch would you be able to work around this, for the time being?

[lucaswitch]

Thanks for the issue. We are discussing how to proceed forward internally. We made some changes in the JS parsers and the new one does not support all the Babel plugins, especially the ones that are still in a proposal stage (like the decorators one, which is in stage 3).

@lucaswitch would you be able to work around this, for the time being?

Not at all, actually i had to revert the apps to 0.75.4.
We are still searching a workaround on the rn babel preset to work through this.

We're using that to define schemas on https://github.com/Nozbe/WatermelonDB which is the goto solution for offline first apps on react-native right now.

[huntie]

@lucaswitch Working on a fix, where we can opt out JS files without // @flow to use the base Babel parser.

Workaround: For now, please convert files that need this extended syntax to TypeScript (.ts(x)).

[lucaswitch]

Thats awesome!
I'll do that!

[robhogan]

As of 0.76.2, Babel syntax plugins including @babel/plugin-proposal-decorators should work (including for non-TypeScript) when:

• Files are not annotated with @flow.
• metro.config.js is configured with transformer.hermesParser==false (we're considering changing this default in a patch release).

// metro.config.js

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
        hermesParser: false,
    },
};

[yuezonglun]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[huntie]

Shipped in React Native 0.76.2 (please update all @react-native/* dependencies in-line!), see @robhogan's comment above.

[MarlonAEC]

@robhogan I have a little problem here if I set the hermesParser: false I got this error:

Error: Got unexpected undefined
    at nullthrows (/Users/maespinosa/Documents/mobile-app/client/node_modules/nullthrows/nullthrows.js:7:15)
    at Graph._recursivelyCommitModule (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:197:27)
    at Graph._addDependency (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:297:25)
    at Graph._recursivelyCommitModule (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:242:16)
    at Graph._addDependency (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:297:25)
    at Graph._recursivelyCommitModule (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:242:16)
    at Graph._addDependency (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:297:25)
    at Graph._recursivelyCommitModule (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:242:16)
    at Graph.traverseDependencies (/Users/maespinosa/Documents/mobile-app/client/node_modules/metro/src/DeltaBundler/Graph.js:99:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

Unfortunately changing all the affected files from *.js -> *.ts(x) is not an option because we just started the migration to typescript a few months ago and there is still a HUGE chuck of work pending to be refactored. This is my metro config:

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

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
        hermesParser: false,
    },
    resolver: {
        assetExts: assetExts.filter((ext) => ext !== "svg"),
        sourceExts: [...sourceExts, 'svg', 'cjs'],
    },
};

module.exports = mergeConfig(defaultConfig, config);

and this is my babel.config.js

module.exports = function (api) {
    api.cache(true);

    const presets = ['module:@react-native/babel-preset'];
    const plugins = [
        ['@babel/plugin-proposal-decorators', { version: "legacy" }],
        'react-native-reanimated/plugin',
    ];

    return {
        presets,
        plugins,
    };
};

Any suggestions on how to tackle this? BTW by just removing hermesParser I get this error:

SyntaxError in App.js: unrecognized character '@' (252:4)
    @autobind

and before you ask this is my libraries versions:

"react-native": "^0.76.2",
"@react-native/babel-preset": "^0.76.2",
"@react-native/eslint-config": "^0.76.2",
"@react-native/metro-config": "^0.76.2",
"@react-native/typescript-config": "^0.76.2",

Should I consider rolling back to a previous version of React Native? If so, which version is the correct one to avoid this problem? Thanks in advance!

[robhogan]

Hi @MarlonAEC - that looks like a Metro bug probably unrelated to Hermes parser, but maybe you’re encountering it because your build is getting further.

Can you reproduce it with code you can share? If so I’d be keen to take a closer look, this is a new one - a new issue over at https://github.com/facebook/metro would be the best place.

[c100k]

As of 0.76.2, Babel syntax plugins including @babel/plugin-proposal-decorators should work (including for non-TypeScript) when:

* Files are _not_ annotated with `@flow`.

* `metro.config.js` is configured with `transformer.hermesParser==false` (we're considering changing this default in a patch release).

// metro.config.js

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
        hermesParser: false,
    },
};

Side note for those landing here like I did : I also had to set hermesParser: false to overcome the error invalid property name - must be a string, number or identifier\nstatic { MyClass_1 = this; } even if '@babel/plugin-transform-class-static-block' was properly configured and called before the other class-related transformers.