ES5 bundled Polymer 3 component fails to load in Safari 10

Question

I'm running into "TypeError: Constructor requires 'new' operator" at line 4 of

function PropertiesChanged() {
  var _this;
  babelHelpers.classCallCheck(this, PropertiesChanged);
  _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PropertiesChanged).call(this));
  _this.__dataEnabled = !1;
  _this.__dataReady = !1;
  _this.__dataInvalid = !1;
  _this.__data = {};
  _this.__dataPending = null;
  _this.__dataOld = null;
  _this.__dataInstanceProps = null;
  _this.__serializing = !1;
  _this._initializeProperties();
  return _this
}

which is part of the ES5 app.js build output of my transpiled web component written in Polymer 3. "This" is instance of object with this.constructor.name === "FeedbackComponent" which is the initial ES6 class name of my PolymerElement.

The component is compatible to Chrome, Firefox, IE10 which makes me believe that the root cause for the above issue lies within my .babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      },
      "exclude": ["transform-classes"]
    }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Update

Meanwhile I realized that .babelrc is actually not considered by the polymer build. I've created a sample repo that contains my web component configuration here: https://github.com/robertfoobar/polymer-3-web-component-sample

Anyone knows how to fix the issue mentioned above?

Pascal L. · Answer 1 · 2018-12-06T17:57:37.613

3

Safari 10 does not support Web Components! I think you will have to use a polyfill https://polymer-library.polymer-project.org/3.0/docs/browsers

UPDATE:

Babel uses browserlist to identify which browser you want to support due to its documentation your browser array should look like this:

"browsers": ["last 2 versions", "Safari >= 10"]

edited Dec 06 '18 at 17:57

answered Dec 06 '18 at 10:11

Pascal L.

1,261
9
21

Thanks for your answer. Polyfills are actually provided by the webcomponents-loader, as described by https://polymer-library.polymer-project.org/3.0/docs/polyfills. Seems I should create a minimal example of my setup. – Robert Dec 06 '18 at 10:24
That would definitly help. – Pascal L. Dec 06 '18 at 11:23
Meanwhile I realized that polymer is actually not respecting my .babelrc config. That means that polyfilling is completely in the hands of polymer. I've created a sample repo with the complete setup here: https://github.com/robertfoobar/polymer-3-web-component-sample – Robert Dec 07 '18 at 15:18
There are files missing in assets ans es5. Btw. putting some private key on github isn´t a good idea ;-) – Pascal L. Dec 08 '18 at 15:29
What asset files do you think are missing? The key.pem is dedicated for the http server that starts up when executing 'npm run serve:prod'. It's generated solely for that purpose and not used anywhere else. So I think that's okay. But thanks for the hint anyways. I double checked it to be on the safe side. – Robert Dec 10 '18 at 08:19
mh i guess i have to run your build sry will try again this evening – Pascal L. Dec 10 '18 at 09:08

score 0 · Accepted Answer · answered Dec 14 '18 at 12:25

The Constructor requires 'new' operator - in this setting - has to do with the browser's CustomElements support. As I said, I tried to load the ES5 representation of my component in Safari. It turns out this is not necessary because Safari 10 seems to have native CustomElements support. So I now serve the ES6 build whenever a browser has a native definition for

window.customElements

That solved the issue in my case.

ES5 bundled Polymer 3 component fails to load in Safari 10

Update

2 Answers2