Upgrade to React Native 0.74: Class private methods are not enabled

[OskarEichler]

Old Version

0.73.6

New Version

0.74.1

Description

After upgrading from 0.73.6 to 0.74.0 / 0.74.1 we are seeing this error:

error: node_modules/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js: /Users/Oskar/trackstats/node_modules/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  117 |   };
  118 |
> 119 |   #findLowestParentFromRegistryForInstance(
      |   ^
  120 |     instance: ReactNativeElement,
  121 |   ): ?DebuggingOverlayRegistrySubscriberProtocol {
  122 |     let iterator: ?ReadOnlyElement = instance;

We didn't change anything in our declarations - here is the babel section of our package.json:

  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-class-properties",
      "@babel/plugin-transform-optional-chaining",
      "@babel/plugin-transform-private-methods"
    ]
  },

Everything is working just fine on 0.73.6

Steps to reproduce

Upgrade to 0.74.1

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 2.42 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.17
    path: /usr/local/bin/yarn
  npm:
    version: 9.9.3
    path: ~/trackstats/node_modules/.bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.13.0
    path: /Users/Oskar/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11709847
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 22.0.1
    path: /usr/bin/javac
  Ruby:
    version: 3.2.1
    path: /Users/Oskar/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: ^18.2.0
  react-native:
    installed: 0.74.1
    wanted: ^0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: false

Stacktrace or Logs

error: node_modules/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js: /Users/Oskar/trackstats/node_modules/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  117 |   };
  118 |
> 119 |   #findLowestParentFromRegistryForInstance(
      |   ^
  120 |     instance: ReactNativeElement,
  121 |   ): ?DebuggingOverlayRegistrySubscriberProtocol {
  122 |     let iterator: ?ReadOnlyElement = instance;

Reproducer

https://github.com

Screenshots and Videos

No response

[oblador]

You are expected to use the @react-native/babel-preset preset on react native projects. Either add this one or add @babel/plugin-transform-private-methods as the error suggests.

[OskarEichler]

@oblador I think that @babel/plugin-transform-private-methods is already part of @babel/preset-env. Everything was working prior to the upgrade. Setting all of the plugins to loose mode or configuring them as overrides unfortunately also doesn't solve it.

Based on the upvotes here it seems like other people are facing the same issue :/

[oblador]

It's possible this is related to flow stripping etc too. Could you verify that this is still an issue using the proper @react-native/babel-preset preset? If not, I'd argue that you should either adjust your config or open an issue in the babel monorepo.