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'

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'

• javascript
• ecmascript-6
• polymer

• 2 The error is telling you that someone is calling PolymerElement() instead of new 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. – jfriend00 Commented Apr 20, 2017 at 13:14
• I also have this error in my element. – Ankita Commented Jun 28, 2017 at 6:02
• Anyone experiencing this problem, can you report the version of the CLI you have, and the UA string of your browser? (try this site for the UA string: whatismybrowser./detect/what-is-my-user-agent ) – Justin Fagnani Commented Aug 13, 2017 at 22:22

5 Answers 5

1. Clear the Cached files and images from your browser cache.
2. If you loaded custom-elements-es5-adapter.js, remove it.
3. Then use $ polymer serve --pile never.

According to this post, this issue is cause because $ polymer serve piles your code to es5 automatically. The --pile 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 pile 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 piled to ES5.

  "builds": [
    {
      "bundle": {
        "stripComments": true,
        "inlineCss": true,
        "sourcemaps": false,
        "excludes": [
          "bower_ponents/webponentsjs/webponents-loader.js",
          "bower_ponents/webponentsjs/custom-elements-es5-adapter.js"
        ]
      },
      "js": {
        "pile": 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 piles 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.