[Bug]: class properties not transformed when using electron targets, shippedProposals enabled

[icedcrow]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

class Test {
  private value = 'value';
  do() {
    console.log(this.value);
  }
}

const test = new Test();
test.do();

Configuration file name

babel.config.json

Configuration

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": {
          "version": "3.8"
        },
        "targets": {
          "electron": "12"
        },
        "shippedProposals": true
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "module-resolver",
      {
        "root": [
          "./src"
        ],
        "alias": {
          "@": "./src"
        }
      }
    ]
  ]
}

Current and expected behavior

getting error:

Module parse failed: Unexpected token (10:8)
File was processed with these loaders:
 * ../../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| // }
| class Test {
>   value = 'value';
| 
|   do() {
 @ ./index.ts 9:0-30 27:2-6

Environment

• Babe: 7.13.15
• Node: 12.18.0
• npm: 6.14.4
• OS: macOS 10.14.4
• Monorepo: no

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @icedcrow! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

That's the expected behaviour: electron 12 supports class properties.

If you want webpack to not crash with class properties, you can try doing something like https://github.com/nicolo-ribaudo/romajs-todo-app/blob/d5e38f2189d0ed7a7cf87cd2c35de5b4af7d2f6a/webpack.config.js#L8.

[icedcrow]

That's the expected behaviour: electron 12 supports class properties.

If you want webpack to not crash with class properties, you can try doing something like https://github.com/nicolo-ribaudo/romajs-todo-app/blob/d5e38f2189d0ed7a7cf87cd2c35de5b4af7d2f6a/webpack.config.js#L8.

Oh, thank you, I solved the problem by adding the following code at the top of webpack.config.js file

const stage3 = require('acorn-stage3');
const acorn = require('webpack/node_modules/acorn');
acorn.Parser = acorn.Parser.extend(stage3);

I found some discussions here webpack/webpack#10216

It seems to be the webpack issue