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
    }]
    ]
  }]
};

[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]

Nope, also created an issue here: reactwg/react-native-releases#286

[kaylee182000]

@OskarEichler I solved it using this step

First, install this:
yarn add @babel/plugin-transform-private-methods --dev

then add this to your babel.config.js file

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

[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 :/