7

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'
3
  • 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
    Apr 20, 2017 at 13:14
  • I also have this error in my element.
    – Ankita
    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.com/detect/what-is-my-user-agent ) Aug 13, 2017 at 22:22

5 Answers 5

8
  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.

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.

0

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

0

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
0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.