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?

Answer 1

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"]

Answer 2

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.