Class constructor PolymerElement cannot be invoked without 'new'

Question

昨天我的应用程序工作得很好但是当我现在做polymer serve -o它打开应用程序并在控制台中打印此错误。

Class constructor PolymerElement cannot be invoked without 'new'

Answer 1

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 --compile never .

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.

Answer 2

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.

Answer 3

I build my Polymer App as es5-bundled, and serve it to Android App using WebView. This problem often appears.

Answer 4

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

Answer 5

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.