`@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

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.

Screenshot 2024-10-25 at 16 26 09

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

Screenshot 2024-10-25 at 16 34 59

facebook / hermes