Tools: Failed to construct 'HTMLElement' when using --js-compile

[pghalliday]

Description

Generated JS fails in Chrome when using --js-compile flag

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new DomModule (dom-module.html:65)
    at dom-module.html:159
    at dom-module.html:163
DomModule @ dom-module.html:65
(anonymous) @ dom-module.html:159
(anonymous) @ dom-module.html:163

Versions & Environment

• Polymer CLI: 0.18.0-pre.13
• node: v7.7.1
• Operating System: macOS

Steps to Reproduce

Not sure if it's related but I do have a .babelrc file for other bits of my code, but when I renamed it out of the way I still got the error. A vanilla app from the generator does not exhibit this problem :s

Expected Results

No errors

Actual Results

Lots of errors

[rictic]

In the built output there should be a script tag that loads webcomponents-es5-loader.js. (You write webcomponents-loader.js in your source code, and CLI will rewrite it to webcomponents-es5-loader.js when you compile your JS).

This error shows up when webcomponents-es5-loader.js didn't load before all of your elements. It contains a shim to make ES5 code talk to native custom elements. The shim bridges the gap between ES5 compiled classes and native ES6 classes, specifically around how super() works.

[pghalliday]

Excellent thanks! I took out the legacy code from index.html to check for webcomponents and load webcomponents-lite.js, but I left in the old code to check for serviceWorker support. I looked and I don't think the loader deals with service workers, although the generated app doesn't have code to register a serviceWorker (and doesn't generate one)

[Homa]

@pghalliday: how exactly you solved your problem?

[pghalliday]

This would be the diff:

     <script>
 -      // Setup Polymer options
 -      window.Polymer = {
 -        dom: 'shadow',
 -        lazyRegister: true
 -      };
 -
 -      // Load webcomponentsjs polyfill if browser does not support native Web Components
 -      (function() {
 -        'use strict';
 -
 -        var onload = function() {
 -          // For native Imports, manually fire WebComponentsReady so user code
 -          // can use the same code path for native and polyfill'd imports.
 -          if (!window.HTMLImports) { document.dispatchEvent(
 -              new CustomEvent('WebComponentsReady', {bubbles: true}));
 -          }
 -        };
 -
 -        var webComponentsSupported = (
 -          'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template'));
 -
 -        if (!webComponentsSupported) {
 -          var script = document.createElement('script');
 -          script.async = true;
 -          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
 -          script.onload = onload;
 -          document.head.appendChild(script);
 -        } else {
 -          onload();
 -        }
 -      })();
 -
 -      // Load pre-caching Service Worker
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', function() {
            navigator.serviceWorker.register('/service-worker.js');
          });
        }
 -
 -
      </script>

 +    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

[davidmaxwaterman]

I'm getting this error and I am using the webcomponents loader. I'm loading it on 'load', like I do my service worker, and I add my-app on 'WebComponentsReady', so it should be ok at that point.

It works 'fine' if I polymer serve, but not if I polymer serve build/es5-bundled. To build, I do polymer build --preset es5-bundled --add-service-worker.

polymer-cli v1.4.1
polymer#2.0.2
webcomponentsjs#1.0.8

Any clues to a fix greatly appreciated.

 77       window.addEventListener('load', function() {
 78         if ('serviceWorker' in navigator) {
 79           navigator.serviceWorker.register('service-worker.js', {
 80             scope: Polymer.rootPath,
 81           });
 82         }
 83
 84         window.addEventListener('WebComponentsReady', function() {
 85           // Load your application shell
 86           let link = document.createElement('link');
 87           link.setAttribute('rel', 'import');
 88           link.setAttribute('href', 'src/my-app.html');
 89           document.head.appendChild(link);
 90         });
 91
 92         // Load webcomponents-loader.js to check and load any polyfills your browser needs
 93         let webcomponentsLoader = document.createElement('script');
 94         webcomponentsLoader.setAttribute('src', 'bower_components/webcomponentsjs/webcomponents-loader.js');
 95         document.head.appendChild(webcomponentsLoader);
 96       });

[araker]

I had the same error message in my code, but in a custom element. The culprit turned out to be a const variable that was later overwritten. Changing the variable into 'let' fixed the problem.