[Bug]: [@babel/preset-env] In Safari, arrow functions with ...args as function parameter always get transpiled regardless of Safari version

💻

• Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

// Regardless of your browserslist versions for Safari, this code's outer function is always transpiled to a plain function (see below) 
module.exports = {
  add: (...args) => args.reduce((acc, val) => acc + val),
};

// Transpiled code
module.exports = {
  add: function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return args.reduce((acc, val) => acc + val);
  }
};

Configuration file name

No response

Configuration

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": 3,
        "targets": [
            "safari >= 15"
        ]
      }
    ]
  ]
}

Current and expected behavior

On our current versions of Babel dependencies specified in our lockfile, this code does not get transpiled and passes through, as is. After updating to latest @babel/preset-env (7.16.0), it’s now being transpiled. This also doesn’t seem correct because all of the syntax in the code is supported in the Safari version specified (15, in this case). It doesn’t seem to matter which version of Safari you specify, it always transpiles outer function with the ...args but leaves inner arrow intact.

It appears to be another child dependency that is controlling this other than @babel/preset-env and @babel/core but not sure which as many Babel dependencies get updated when updating @babel/preset-env. So, for example, if I just install versions of @babel/preset-env and @babel/core, per our package-lock, it still transpiles that arrow with …args to a regular function.

We caught this because unit tests that were once passing now fail as this code is getting transpiled when it shouldn’t be according to our browserslist config.

Environment

• Babel
  • @babel/preset-env 7.14.8
  • @babel/core 7.14.8
  • @babel/cli 7.14.3
• Node 12.13.0
• MacOS 10.15.7

Possible solution

No response

Additional context

I have a feeling that this is related to a version of a child dependency locked at a particular version so is difficult to reproduce without sending you the entire lockfile. Let me know which dependencies would affect this and I can send you what our lockfile is showing.

[JLHwung]

transform-parameters { safari }

The parameter transform kicks in because Safari has a bug on transforming parameters: https://bugs.webkit.org/show_bug.cgi?id=220517

You can add bugfixes: true to the preset-env options to tell Babel: only transform parameters when the input code is actually affected by this bug. This will be enabled by default on Babel 8.

[peripateticus]

Yep that did it! adding bugfixes: true to the present-env option output:

@babel/preset-env: `DEBUG` option

Using targets:
{
  "safari": "15"
}

Using modules transform: false

Using plugins:
  proposal-class-static-block { safari }
  syntax-private-property-in-object
  syntax-class-properties
  syntax-numeric-separator
  syntax-nullish-coalescing-operator
  syntax-optional-chaining
  syntax-json-strings
  syntax-optional-catch-binding
  syntax-async-generators
  syntax-object-rest-spread
  proposal-export-namespace-from { safari }
  bugfix/transform-safari-id-destructuring-collision-in-function-expression { safari }
  syntax-dynamic-import
corejs3: `DEBUG` option

Using targets: {
  "safari": "15"
}

Using polyfills with `usage-global` method:

[/prj/babel/bug.js]
Based on your code and targets, the corejs3 polyfill did not add any polyfill.
module.exports = {
  add: (...args) => args.reduce((acc, val) => acc + val)
};

Thanks for your help on this @JLHwung! Closing this one out.