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'

回答1:

Clear the Cached files and images from your browser cache.
If you loaded custom-elements-es5-adapter.js, remove it.
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.

回答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.

回答3:

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

回答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

回答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.

来源：https://stackoverflow.com/questions/43520535/class-constructor-polymerelement-cannot-be-invoked-without-new

标签

javascript

ecmascript-6

polymer