Yesterday my app worked perfectly however when I now do polymer serve -o
it opens the app and prints this error in the console.
Class constructor PolymerElement cannot be invoked without 'new'
According to this post, this issue is cause because $ polymer serve compiles your code to es5 automatically. The --compile never flag stops $ polymer serve from doing this.
I had a similar Error the other day after moving my Polymer App to v.2.
This helped me:
To work around this, load custom-elements-es5-adapter.js before declaring new Custom Elements.
Since most projects need to support a wide range of browsers that don't necessary support ES6, it may make sense to compile your project to ES5. However, ES5-style custom element classes will not work with native Custom Elements because ES5-style classes cannot properly extend ES6 classes, like HTMLElement.
I build my Polymer App as es5-bundled, and serve it to Android App using WebView. This problem often appears.
In your polymer.json
, add custom-elements-es5-adapter
to the excludes
array to stop it from being compiled to ES5.
"builds": [
{
"bundle": {
"stripComments": true,
"inlineCss": true,
"sourcemaps": false,
"excludes": [
"bower_components/webcomponentsjs/webcomponents-loader.js",
"bower_components/webcomponentsjs/custom-elements-es5-adapter.js"
]
},
"js": {
"compile": true,
"minify": true
},
"css": {
"minify": true
},
"html": {
"minify": true
},
"addServiceWorker": false
The problem occurs because Custom Elements v1 requires your code to use ES6 syntax. So make sure you don't transpile to anything lower, like ES5.
For anyone running into this using the Parcel bundler like me; by default it compiles your code to ES5 or something, even if you're using Typescript and you've set the tsconfig target to ES6.
The solution is to tell Parcel what browsers you're targeting, so that it knows it doesn't have to transpile to ES5. One way to do it is to add a "browserlist" field in package.json.
I found out about this through this video. For more info I suggest you go watch that.
PolymerElement()
instead ofnew PolymerElement()
. If you are using source control, you can look at what changed since yesterday that could be the trigger for this. Unless someone who knows Polymer inside out recognizes this situation, there's no much we can do without seeing your code or without knowing what you changed recently.