CODEWITHSUNDEEP
javascriptpolymerbabeljscustom-elementpolymer-2.x
devlop
devlop

Reputation: 1198

Why is wecomponentsjs/custom-elements-es5-adapter.js not working

I converting a Polymer app to Polymer 2. I'm changing my components to the ES6 Class syntax (yes I know I could leave them in v1.7 hybrid style but I would like them to be ES6 Classes).

However when I transpile the code back to ES5 (with BabelJS) I run into a known issue regarding ES5 'classes' extending native elements (https://github.com/babel/babel/issues/4480).

I tried babel-plugin-transform-custom-element-classes but that didn't work. So I tried the webcomponents shim meant to fix this issue: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs

But the shim doesn't work! I don't know what I'm doing wrong :(

<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
  /* transpiled to ES5 */
  class YExample extends HTMLElement {}
  customElements.define('y-example', YExample);
</script>

Here is my jsbin: http://jsbin.com/feqoniz/edit?html,js,output

Notice I'm including the custom-elements-es5-adapter.js, also notice the JS panel is using ES6/Babel.

If you remove the custom-elements-es5-adapter.js and change the JS panel to normal Javascript (not ES6/Babel) then everything works fine.

You can include or remove the adapter (leaving ES6/Babel) and the error is basically the same thing, except that when the adapter is included it comes from the adapter code instead: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

I must be doing something silly? Any ideas?

Upvotes: 1

Views: 6897

Answers (3)

Tiago Romero Garcia
Tiago Romero Garcia

Reputation: 1078

I am having a similar issue and I found a solution that works for me.

Disclaimer: I don't use an app-shell because I have a server-side rendered site with just a few isolated Polymer components on the client-side.

After intense debugging the issue came down to the fact that I was including this block (as suggested on the Polymer guides):

<div id="autogenerated-ce-es5-shim">
  <script type="text/javascript">
    if (!window.customElements) {
      var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
      ceShimContainer.parentElement.removeChild(ceShimContainer);
    }
  </script>
  <script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>

Because when I ran polymer build it would pick up custom-elements-es5-adapter.js from there.

This is what I did instead:

<script type="text/javascript">
if (window.customElements) {
   document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
}
</script>

YES it's not as elegant and quite rustic but, hey, it works! Here I'm tricking the compilers inside polymer build and they won't find this file and hence they won't include it in the build.

I hope it helps!

Upvotes: 1

Julien Andr&#233;
Julien Andr&#233;

Reputation: 106

I was stucked with the same issue.

The problem was due to my build chain (gulp) transpiling every js files of the project. But the custom-elements-es5-adapter.js file must not be transpiled to work. Transpile everything but this file.

Upvotes: 1

devlop
devlop

Reputation: 1198

Well, I was doing something silly.. I should have tried upgrading my Babel package.

Upgraded BabelJS from 6.23.1 to latest 6.24.1 and it fixed the problem. :P

Upvotes: 1

Related Questions