Failed to construct 'HTMLElement'

Question

I run my-widget.js through babel (es2015 preset) to produce my-widget-es5.js. This causes an error with Polymer.

Class constructor PolymerElement cannot be invoked without 'new'
    at new MyWidget (my-widget.js:##)
    at mw-widget.js [sm]:##

file structure

out
 |
 -- my-widget-es5.js
js
 |
 -- my-widget.js
html
 |
 -- my-widget.html

my-widget.html

<dom-module id="my-widget">
    <template>
        <script src="/out/my-widget-es5.js"></script>
    </template>
</dom-module>

my-widget.js

class MyWidget extends Polymer.Element {
    static get is() {
        return 'my-widget';
    }
}

customElements.define(MyWidget.is, MyWidget);

Answer 1

According to SO user @joncarlson:

You may find a solution by using the custom-elements-es5-adapter.js file proposed as a workaround by Webcomponentsjs.

Answer 2

Take a look at the link below. Just use the es5-bundled preset version and you should be ready to go. It will include conditional loading of the custom-elements-es5-adapter.json that @Supersharp mentioned.

https://www.polymer-project.org/2.0/docs/tools/polymer-json#builds