React Native - Class private methods are not enabled

[Overtorment]

Ethers Version

6.70.

Search Terms

react native

Describe the Problem

when running yarn start --reset-cache :

error: node_modules/ethers/lib.commonjs/abi/abi-coder.js: xxx/node_modules/ethers/lib.commonjs/abi/abi-coder.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.

I would like NOT to add plugin-transform-private-methods as adding it breaks something else. Is is possible..?

Code Snippet

No response

Contract ABI

No response

Errors

No response

Environment

React Native/Expo/JavaScriptCore

Environment (Other)

No response

[ricmoo]

Is this a restriction of React Native? JavaScriptCore supports private members…

What does the transform component break? I know with older versions of Angular there was a bug in the transform; is that the issue you are having?

Private members are used in many places to prevent meddling with internal state. :)

[Overtorment]

forgot to mention, react-native version 0.71.10
metro-react-native-babel-preset version 0.73.9 (not sure if its important)

after adding babel plugin this is the issue I was having:

I was able to use solution provided here: #3996 (comment)
(added override to babel plugin)

    overrides: [
      {
        test: './node_modules/ethers',
        plugins: [
          ["@babel/plugin-transform-private-methods", { "loose": true }]
        ]
      }
    ]

[ateeq4112]

Thanks

[sonugk]

Thank you.
Worked for me, but it was still complaining about formatting may be due to newline characters or linting rules.
Below is how it worked which was suggested in error itself:
My react-native version was: 0.74.0

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  overrides: [{
    "plugins": [
      ["@babel/plugin-transform-private-methods", {
      "loose": true
    }]
    ]
  }]
};

[TranHung22]

This works for me. I use RN 0.76

[ricmoo]

Awesome, so that resolved the issue then? I'm going to move this to discussions to assist those in the future that may happen across the same issue.

Thanks! :)

[emclab]

A similar problem happened when upgrading from v5.7 to v6.7:

error: node_modules/ethers/lib.commonjs/abi/abi-coder.js: /Users/macair/Documents/code/js/xyz_app6/node_modules/ethers/lib.commonjs/abi/abi-coder.js: Class private methods are not enabled. Please add `@babel/plugin-proposal-private-methods` to your configuration.
  111 |  */
  112 | class AbiCoder {
> 113 |     #getCoder(param) {
      |     ^
  114 |         if (param.isArray()) {
  115 |             return new array_js_1.ArrayCoder(this.#getCoder(param.arrayChildren), param.arrayLength, param.name);
  116 |         }

The solution provided above (overrides: in babel.config.js) didn't work.

[Kristiyandz]

@emclab did you find a solution to this? I am experiencing the same error now

[pablo4lvarez]

i added this line inside the main plugins section:

['@babel/plugin-transform-private-methods', { loose: true }],

[CHYGO1985]

I have the same issue, and the above solution works for me

[pablo4lvarez]

I'm having a similar issue.

node_modules/ml-matrix/matrix.js: /Users/pablo/Development/glik-android-react/node_modules/ml-matrix/matrix.js: Class private methods are not enabled. Please add @babel/plugin-transform-private-methods to your configuration.
2824 | * @param {number} nColumns
2825 | */

2826 | #initData(nRows, nColumns) {
| ^
2827 | this.data = [];
2828 |
2829 | if (Number.isInteger(nColumns) && nColumns >= 0) {.
SyntaxError: /Users/pablo/Development/glik-android-react/node_modules/ml-matrix/matrix.js: Class private methods are not enabled. Please add @babel/plugin-transform-private-methods to your configuration.

i did the things in your solution @Overtorment , but nothing really happens so i cant run my ios app!

im using:

• React Native 0.72.4
• metro-react-native-babel-preset version 0.76.7

[OskarEichler]

Unfortunately that doesn't work for us either :/

[kaylee182000]

after installing it, I used this command and it worked
yarn start --reset-cache

I hope it can help you :>

[OskarEichler]

We always start with the --reset-cache flag, unfortunately no luck :/

[levangiac]

you can clean build android -> remove node_module -> re install node_module (yarn install) -> yarn android good luck

[TengoMan]

['@babel/plugin-transform-private-methods', { loose: true }], worked for me!
Thanks!

[Kasik-D]

The provided solution appears functional:

overrides: [{
    "plugins": [
        ["@babel/plugin-transform-private-methods", {
            "loose": true
        }]
    ]
}]

However, when using FlashList, an error occurs: ERROR TypeError: Cannot read property 'getItem' of undefined.

[tajinder-06]

this solved the issue but app crashes on startup and giving an alert box with message that this app has a bug

[gsmental]

install these packages and then replace code a mentioned below, if babel.config.js not found in root, then create this file
npm i @babel/plugin-transform-private-methods @babel/plugin-proposal-class-properties

replace babel.config.js with

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-paper/babel', '@babel/plugin-transform-private-methods', '@babel/plugin-proposal-class-properties'],
};

[HarshadaPhadtare]

inside bable.config file add this code
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
['@babel/plugin-transform-class-properties', { loose: true }],
['@babel/plugin-transform-private-methods', { loose: true }],
['@babel/plugin-transform-private-property-in-object', { loose: true }],
],
};
and also check this version package "@babel/core": "^7.20.0",
"@babel/plugin-transform-class-properties": "^7.21.0",
"@babel/plugin-transform-private-methods": "^7.21.0",
"@babel/plugin-transform-private-property-in-object": "^7.21.0",

[prhasn]

This worked for react native with ethers 6.13.3