With preset-env, still need to manually add plugin-transform-classes for (...args) => super(...args)

[compulim]

💻

• [ ] Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

class Foo {
  constructor() {}
}

class Bar extends Foo {
  constructor(...args) {
    let f = (...args) => super(...args);
    f();
  }
}

Configuration file name

babel.config.json

Configuration

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

Current and expected behavior

It would fail with an error.

SyntaxError: ...: When using '@babel/plugin-transform-parameters', it's not possible to compile `super()` in an arrow function with default or rest parameters without compiling classes.
Please add '@babel/plugin-transform-classes' to your Babel configuration.
   5 | class Bar extends Foo {
   6 |   constructor(...args) {
>  7 |     let f = (...args) => super(...args);
     |                          ^^^^^^^^^^^^^^
   8 |     f();
   9 |   }
  10 | }
...
{
  code: 'BABEL_TRANSFORM_ERROR'
}

Environment

 System:
    OS: Linux 5.15 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat)
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm
  npmPackages:
    @babel/cli: ^7.26.4 => 7.26.4 
    @babel/core: ^7.26.10 => 7.26.10 
    @babel/plugin-transform-classes: ^7.25.9 => 7.25.9 
    @babel/preset-env: ^7.26.9 => 7.26.9

Possible solution

Manually add @babel/plugin-transform-classes to babel.config.json/plugins.

Additional context

Maybe related to #15148.

Compat data says @babel/plugin-transform-classes is not needed for Safari >= 10, which may not be true as this bug repro.

Working configuration for @babel/preset-env

{}

{
  "forceAllTransforms": true,
  "targets": {
    "esmodules": true
  }
}

{
  "targets": {
    "safari": "9"
  }
}

(Newly added below)

{
  "bugfixes": true,
  "targets": {
    "esmodules": true
  }
}

{
  "bugfixes": true,
  "targets": {
    "esmodules": true,
    "safari": "10"
  }
}

Not working configuration for @babel/preset-env

(Same error)

{
  "targets": {
    "esmodules": true,
    "safari": "10"
  }
}

{
  "targets": {
    "safari": "10"
  }
}

[babel-bot]

Hey @compulim! 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.

[JLHwung]

Yeah Safari 10 was affected by a bug so the parameter transform was enabled.

Could you enable the bugfixes preset-env option?

[compulim]

Enabling bugfixes resolved it.

{
  "bugfixes": true,
  "targets": {
    "esmodules": true
  }
}

I think it's regardless of Safari 10, but the way Babel find what plugins is needed is much improved after this flag is enabled.

Do you think it's cool to close this bug or if someone still want to look at this issue? Or maybe modify the error message to tip about this flag?

When using '@babel/plugin-transform-parameters', it's not possible to compile `super()` in an arrow function with default or rest parameters without compiling classes.
Please add '@babel/plugin-transform-classes' or enable 'bugfixes' flag in your Babel configuration.