💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

This bug can be triggered by input code like the following, when compiled with webpack and a babel config with preset-env that targets latest Safari/iOS (class fields are not transformed).

import helper from './helper'

class C {
  property = helper(() => {})
}

Current and expected behavior

Extra parens in class fields cause ReferenceErrors in Safari, see webkit bug: https://bugs.webkit.org/show_bug.cgi?id=236843

Generated code will produce an error like "ReferenceError: Can't find variable a".

Until the webkit implementation is fixed, class fields should continue to be transpiled when targeting Safari/iOS.

Environment

@babel/core 7.17
@babel/preset-env 7.16.11
@babel/compat-data 7.16.8
webpack 5.38.1

Possible solution

Remove Safari and iOS from proposal-class-properties compat data:
https://github.com/babel/babel/blob/v7.17.5/packages/babel-compat-data/data/plugins.json#L19-L29

Does this require updating the upstream compatibility data?
https://github.com/kangax/compat-table

Workaround

If anyone else experiences this issue, the easy fix is to force transformation of class properties in preset-env config:

presets: [
  [
    '@babel/preset-env',
    {
      include: ['@babel/plugin-proposal-class-properties'],
    },
  ]
],