polymer-webpack-loader: Failed to construct 'HTMLElement' new DomModule

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 16 (3 by maintainers)

Most upvoted comments

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' }
      ]
    },
  ...
  ]
}

robdodson on Oct 17, 2017