24

Got this code, that works perfectly in all browsers but not in Safari (Version 11.1.2).

class Account {
 accountFields = ['field1', 'field2', 'field3']
}

Getting the following error in Safari debugger:

Unexpected token '='. Expected an opening '(' before a method's parameter list

So I tried to add () everywhere, around the array, before, after, etc. Nothing works.

2 Answers 2

40

You're using a relatively new feature known as public field declarations. It's currently supported by most modern browsers. However, the only Safari versions that support this feature are v14.1 (released April 26th, 2021) and higher. If you need to support older versions of Safari / a wider variety of older browsers you'll need to follow one of the suggestions below.


Instead of using public field declarations, you can use a constructor() method to define the properties for your class instances. Using a constructor does have good browser compatibility (for IE support you can use a constructor function):

class Account {
  constructor() {
    this.accountFields = ['field1', 'field2', 'field3'];
  }
}

As pointed out in the comments by @Baz, you can also use Babel as an alternative solution. Using babel means that you won't have to change your code, which can make things easier on you if you're using public field declarations a lot throughout your project. Babel will transpile/compile your modern JS code into older (ES5 and below) JS code which can be understood by many browsers. You can use this babel plugin like so.

First, install the babel plugin:

npm install --save-dev @babel/plugin-proposal-class-properties

Then add the plugin to your configuration file:

{
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

For other installation options (babel CLI, etc), see the usage section of the plugin's docs.

6
  • 1
    You can also use babel to compile without changing your code: '@babel/plugin-proposal-class-properties': babeljs.io/docs/en/babel-plugin-proposal-class-properties
    – Baz
    Jul 9, 2020 at 18:39
  • 2
    I have the Version 14.0.1 and I still get the same error. It's not in beta now.
    – Savandy
    Nov 18, 2020 at 13:33
  • @Savandy thanks, apparently there's a bug in newer versions of Safari, and so there is only partial support at the moment Jan 28, 2021 at 12:39
  • It seems Safari also does not handle symbol # private class features very well. I tested on Safari 10 declared in constructor as this.#variable = 23 and it struggled where as Firefox handled it like a true champion. Private class feature should be compatible since Safari 9 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. I used strict. Jan 8, 2022 at 11:03
  • 1
    @NickParsons my bad, you are correct. Thank you. Jan 9, 2022 at 9:15
1

I got a similar issue, in my case it was working with Safari on my Mac, but not on my iPad.

I was using deno and esbuild to build my bundle, I just changed added the --target=safari11 option to esbuild command.

I changed something like this

deno bundle entry.js | esbuild --minify > bundle.js

to this

deno bundle entry.js | esbuild --minify --target=safari11 > bundle.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.