question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failed to construct 'HTMLElement' new DomModule

See original GitHub issue

So I’ve updated to the latest version 1.2.6 but I now seem to be getting some errors in console. Now I am on windows 7 and it was working before I updated. I ran a npm run build to compile the files and im loading the bundle.js script on an html page and trying to view <my-element> on there as well. The error message below is all im seeing now.

bundle.js:3075 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at new DomModule (bundle.js:3075) at Function.register (bundle.js:109) at Object.<anonymous> (bundle.js:916) at __webpack_require__ (bundle.js:20) at Object.<anonymous> (bundle.js:890) at __webpack_require__ (bundle.js:20) at bundle.js:63 at bundle.js:66 DomModule @ bundle.js:3075 register @ bundle.js:109 (anonymous) @ bundle.js:916 __webpack_require__ @ bundle.js:20 (anonymous) @ bundle.js:890 __webpack_require__ @ bundle.js:20 (anonymous) @ bundle.js:63 (anonymous) @ bundle.js:66 bundle.js:6483 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at MyElement.PropertyAccessors (bundle.js:6483) at MyElement.TemplateStamp (bundle.js:7393) at MyElement.PropertyEffects (bundle.js:4291) at MyElement.PolymerElement (bundle.js:2346) at new MyElement (bundle.js:926) at Object.<anonymous> (bundle.js:951) at __webpack_require__ (bundle.js:20) at Object.<anonymous> (bundle.js:890) at __webpack_require__ (bundle.js:20) at bundle.js:63

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:16 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
robdodsoncommented, Oct 17, 2017

I hit this failed to construct DomModule issue today and realized it’s because I was loading the custom-elements-es5 adapter but I wasn’t actually transpiling my code.

If you have an element named MyElement, look in your bundled js to see if it still has class MyElement or if it has the transpiled version. If it still has class MyElement then you may have forgotten to include a .babelrc. Here’s what I use:

{
  "presets": ["es2015"]
}

And you need to also make sure you’re chaining your loaders. In your webpack config do:

module: {
  rules: [
    {
      test: /\.html$/,
      use: [
        // Chained loaders are applied last to first
        { loader: 'babel-loader' },
        { loader: 'polymer-webpack-loader' }
      ]
    },
  ...
  ]
}
0reactions
ChadKillingsworthcommented, Aug 18, 2017

Closed by #55

Read more comments on GitHub >

github_iconTop Results From Across the Web

Failed to construct 'HTMLElement' new DomModule · Issue #53
So I've updated to the latest version 1.2.6 but I now seem to be getting some errors ... Failed to construct 'HTMLElement' new...
Read more >
polymer - Failed to construct 'HTMLElement' - Stack Overflow
This causes an error with Polymer. Class constructor PolymerElement cannot be invoked without 'new' at new MyWidget (my-widget.js:##) at mw-widget.js [sm]: ...
Read more >
Chrome Browser Custom Element Error | by Allen Kim - Medium
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. npm install...
Read more >
Uncaught TypeError: Failed to construct 'HTMLElement'
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function ...
Read more >
polymer-webpack-loader
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found