[Bug]: Unable to transform arrow inside class property

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

source code:

class A {
  handle = (x = 0) => {
    console.log(x);
  };
}

github repo: https://github.com/Zousdie/babel-bug-unable_to_transform_arrow_inside_class_property

Configuration file name

babel.config.js

Configuration

module.exports = {
  presets: ['@babel/preset-env'],
};

Current and expected behavior

SyntaxError “Unable to transform arrow inside class property” during compilation.

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unable to transform arrow inside class property
  1 | class A {
> 2 |   handle = (x = 0) => {
    |            ^
  3 |     console.log(x);
  4 |   };
  5 | }

Environment

System: OS: macOS 10.15.7 Binaries: Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn npm: 8.1.3 - ~/.nvm/versions/node/v14.18.1/bin/npm npmPackages: @babel/core: ^7.16.0 => 7.16.0 @babel/preset-env: ^7.16.0 => 7.16.0 babel-loader: ^8.2.3 => 8.2.3 webpack: ^5.62.1 => 5.62.1

Possible solution

No response

Additional context

This error occurs when the browserslist config contains last 1 safari version. It’s strange that if you remove this rule, there will be no problem

[nicolo-ribaudo]

Whops, I didn’t see your comment and I opened a PR to relax the check (which might be useful in general).

[JLHwung]

The root issue here is that we have transforms (e.g. class transform) which assume certain language feature (arrows) should not be transpiled before. This is mostly true when a language feature is implemented before another universally among major browsers: In this case, the class property is implemented after arrow functions. So we don’t expect transpiling arrows leaving class properties untouched.

However, the introduction of bugfixes breaks this assumption, so the parameters-transform unconditionally kicks in if bugfixes: false (the current Babel 7 default) is applied. From users perspective, upgrading preset-env certainly becomes a regression, which is caused by us downgrading the language feature supports due to how bugfixes works.

Therefore, I propose we enable the bugfixes, at least the newly added (v8-spread/safari-id-destructuring) by default.

An alternative solution would be not downgrading the support matrix: So:

• bugfixes: false means the compilation results may be affected by certain browser bugs
• bugfixes: true adds such bugfix plugin to workaround the bug

Neither of them will affect the browser compat data.