Uncaught TypeError: Class constructor cannot be invoked without 'new'

[davidmaxwaterman]

Background:

I'm trying to switch from using polymer build to using a gulpfile based on the one from :

https://github.com/PolymerElements/generator-polymer-init-custom-build

This is so I can add a version string into my app.

I have a slightly unsual app structure:

1. a plain old index.html that displays my first page - pretty much just a logo.
2. on window load, I then: a. register a service worker b. add an event listener for WebComponentsReady which loads my-app. c. add a script tag for webcomponents-loader.js
3. in my-app, I have a few lazy-loaded elements using lazy-imports-mixin.html.

As mentioned, my gulpfile to build based on the custom psk build gulpfile, with some fixes shown in the following issue:

https://github.com/PolymerElements/generator-polymer-init-custom-build/issues/71

I have disabled bundling, as well as adding the code to add a version number - nothing of much consequence to this issue, I think.

If I put in console logs, the loading all seems to happen in the correct order, up until my-app is loaded, at which point, I get the error:

Uncaught TypeError: Class constructor  cannot be invoked without 'new'

I find this problem is similar to the following, which @rictic mentions using webcomponents-es5-loader.js, but I don't have that file in webcomponentsjs :

https://github.com/Polymer/polymer-cli/issues/601

and this problem is the same error message, though I'm not sure it is similar:

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

A suggestion in the above is to add custom-elements-es5-adapter.js (due to using webcomponents-loader.js), but I must already have that since it is in the call stack:

Uncaught TypeError: Class constructor  cannot be invoked without 'new'
    at HTMLElement.MyApp (ant-app.html:131)
    at new j (custom-elements-es5-adapter.js:4)
    at CustomElementRegistry.value (custom-elements-es5-adapter.js:4)
    at my-app.html:721

I was using polymer serve to serve my build/ directory, and one suggestion in the SO above suggests turning off the compile with --compile never, which I am doing...so it hasn't made any difference.

@justinfagnani requests cli version and ua string:

$ polymer --version
1.5.7

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

I hope someone can point me in the correct direction.

In the meantime, I'll attempt to turn the basic PSK-custom into a test case showing the same problem.

[mnemanja]

Hi @davidmaxwaterman, Have you solved this already and how? I'm not using polymer, just vanilla custom elements with React, but it's the same problem.

[vitawt]

hi , i use 'polymer build' and it with the same problem; have you solved? it has troubled me for a long time (￣^￣)ゞ

[mnemanja]

https://github.com/sindresorhus/ponyfill solved it :)

[robertfoobar]

Same problem here, using a webpack build with babel for my polymer web component. Problems arise when I configure babel to also target other browsers than Chrome. I.e. the following .babelrc config works:

{
  "presets": [
    [
       "env", {
      "targets": {
        "browsers": [
          "Chrome >= 52"          
        ]
      },
      "useBuiltIns": true
      }
    ],
    "stage-1"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    "syntax-class-properties"
  ]
}

whereas the next one causes the mentioned issue:

{
  "presets": [
    [
      "env", {
      "targets": {
        "browsers": [
          "Chrome >= 52",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11"
        ]
      },
      "useBuiltIns": true
      }
    ],
    "stage-1"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties",
    "syntax-class-properties"
  ]
}

[sr258]

I have the same issue here. Has anyone ever solved this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.