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.

[suhassasuke]

@OskarEichler check your babel.config.js or babel.rc file. I was also facing the same issue.

module.exports = {
presets: ['module:@react-native/babel-preset'], <--- this is what you need to resolve your error
plugins: [
'react-native-reanimated/plugin',
],
};

[cipolleschi]

Can we consider this solved, @OskarEichler?

[OskarEichler]

I suppose so, haven't had time to dive in yet but quickly tested with the '@react-native/babel-preset' and throwing some other error now so I guess we will be able to make it work. It's interesting that it was working up until the previous release with our existing config, and now I guess we will need to split out our babelrc to a native and web file to use different presets.

[devSoftlogicx]

@OskarEichler check your babel.config.js or babel.rc file. I was also facing the same issue.

module.exports = { presets: ['module:@react-native/babel-preset'], <--- this is what you need to resolve your error plugins: [ 'react-native-reanimated/plugin', ], };

it works

[TheRusskiy]

Works for some, but not others.
This errors seems to be happening for people who forgot to add this option to their babel config.
But also to other people due to some bug within RN/babel.

[Priyanshu2117]

module:@react-native/babel-preset

This worked, but now the app is crashing at startup.