Polymer 2: Class constructor PolymerElement cannot be invoked without ‘new’

“Polymer serve” sometimes compiles your code even for ES6 browsers. Here is how to resolve this error.

We develop our Polymer elements based on demos (to learn more about Demo-driven Development). We run these demos via polymer serve.

Everything worked fine until suddenly, out of nowhere, Chrome started giving us this error message:

Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'
    at new MyElement (my-element.html:20)
    at HTMLElement._stampTemplate (template-stamp.html:417)
    at HTMLElement._stampTemplate (property-effects.html:2240)
    at HTMLElement.ready (element-mixin.html:651)
    at HTMLElement.ready (legacy-element-mixin.html:151)
    at HTMLElement.ready (class.html:205)
    at HTMLElement.ready (swipe-page.html:218)
    at HTMLElement._enableProperties (property-accessors.html:494)
    at HTMLElement.connectedCallback (element-mixin.html:633)
    at HTMLElement.connectedCallback (legacy-element-mixin.html:81)

Reloading the page didn’t help. Restarting polymer serve neither. Nor did stripping the element to its absolute minimum.

Inspecting the code in Chrome DevTools revealed that polymer serve had compiled our element to ES5 — although Chrome does understands ES6. Fortunately, the polymer-cli has a flag to prevent compiling to ES5:

$ polymer serve --compile never

Important: Before reloading the page, clear the Cached files and images from your browser cache.

We still don’t know what causes polymer serve to spontaneously compile elements (at the time of writing this is polymer-cli 1.3.0) but at least we have now a recipe to recover from when it happens.

Happy coding!

Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.

Photo: Martin Abegglen