Webcomponents polyfills fail on Edge

user_2795627 0
Viewed 1112

I'm trying to integrate Polymer 2 components into an existing SPA (built [ab]using JSF). I got the basics working as long as my POC is running in Chrome and I don't really care whether it renders in Shadow or Shady DOM (yet. Both were tested successfully). Also, there's no Polymer build yet. But all is well.

Enter MS Edge. Now I'm required to polyfill every single platform feature, but I'm fine with that: I did bower install webcomponentsjs and I also <script>-included webcomponents-lite.js, first thing in my html header. Even when forcing all polyfills, everything works fine in Chrome.

MS Edge just yields lots of HTTP 404s, for the following files (non-exhaustive list):

  • (XHR)GET - localhost:9980/my/application/root/bower_components/webcomponentsjs/%20[synthetic:util/global]
  • [...]root/bower_components/webcomponentsjs/webcomponents-hi-sd-ce-pf-index.js
  • [...]root/bower_components/node_modules/@webcomponents/shadycss/src/scoping-shim.js
  • + 63 more, similar failing requests, all pointing within bower_components/node_modules

Interestingly, none of these exist in my setup, after running just bower install. Are they supposed to be generated? If so, in what build/setup step? Including webcomponents-loader instead of webcomponents-lite doesn't make any difference.

Webcomponents polyfill is included first thing in the header; Polymer lib last. There are some other JavaScript libraries loaded in between, which are used for rendering the app. Components are instantiated and lazy-loaded on-demand, after the app itself was rendered and initialized. But I suspect Edge stops anything WC-related long before that. Also, I cannot debug any network activity (e.g. proper loading of webcomponents-[lite|loader]) due to F12 Debug Tools' Network Tab's immediate death, on load.

My app is served by WebSphere Liberty profile (Windows 7), which might or might not make all the difference. Maybe it's an issue with file/disk permissions? How can I check that?

I know this issue looks very similar to Polymer 2.0 webcomponents-loader.js is missing Edge polyfill but I decided to go with a more thorough description of my environment, because I suspect that to be the problem.

Any ideas appreciated.

polymer-2.x microsoft-edge
2 Answers

Edge is working, but using F12 developer tools breaks things.

As it turns out, this doesn't have to do with my context at all; the same issue applies to projects created with the starter kit.

See https://github.com/PolymerElements/polymer-starter-kit/issues/1025 for another angle on this:

@Inrego commented on 27 Jul: I updated polymer-cli and used polymer init followed by polymer serve Result: Without F12 window, the app loads. With F12 window open, the app doesn't load, and a few js errors are thrown.

user_27956270
Related