Stencil: IE11: Polyfill Infinite Loop - es6-collections vs core-js/map

[cary-smith]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

The es6-collections library is run first and works great.

When added to an Angular 6 project (which includes the core-js map/weakmap/etc polyfills), the constructor of the polyfill is modified due to an iterable shortcoming (not sure exactly what). Once the constructor is modified, this line

if (!this || this.constructor !== b) return new b(a);

...from es6-collections will always identify the constructor as not 'b', so it runs into a stack overflow in IE11 while loading an angular application.

Expected behavior:

The Ancient One (IE11) still functions as expected: Slowly, painfully, and with lots of excess code to make it behave until we can put it on the trash heap.

Steps to reproduce:

I was able to reproduce it in the following:

1. run git clone -b IE11-polyfill-fun [email protected]:cary-smith/stencil-component-starter.git
2. run npm i
3. Open the node_modules/@stencil/core/dist/client/polyfills/es5/map.js file
4. Add a console log just under the line mentioned in the Current Behavior section of this ticket

Related code:

(function(e) {
  function d(a, b) {
    function c(a) {
      console.log("IE still exists and makes us all sad...");
      if (!this || this.constructor !== c) return new c(a);

1. Run the application via npm start
2. Open in IE11 and watch that console log GO! Wheeeee!

Other information:

This blocks our ability to stay current with all the new kick-assery you folks keep implementing and may side-affect other devs at some point. We want to stay in the loop!

Thanks for the awesome software.

[warapitiya]

I'm facing same issue. I think es6-collections is colliding with other existing polyfill.

[warapitiya]

Can't we use es6-shim instead of string.js, map.js, array.js, promise.js and object.js?

[cary-smith]

One other note: es6-collections is deprecated as noted on their github readme.

[dgibson666]

Is there a fix or workaround for this? We're still on Stencil 15.2. The latest 16.2 did not seem to fix this still.

[cary-smith]

@dgibson666 not as long as they continue to use the deprecated polyfill 😞. I think a PR would be the most effective in this case.

[stefanmeschke]

I have the same issue.

@cary-smith @dgibson666
Did you start working on it?

Cheers!

[cary-smith]

@stefanmeschke - Sadly have not yet had the break to take a look.

[cary-smith]

I am kinda hoping this does not get bot-closed. Is there any possibility of a different approach?

[dgibson666]

Agreed. I'm surprised they shipped ionic 4 with this still outstanding. We're still unable to upgrade past .15.2 because of this issue.

[matdec01]

Experiencing issues here as well (cc. @adamdbradley )

[rjaguilar]

same here

[roNn23]

We've developed a bug fix for this issue. You can find it here: https://github.com/AOEpeople/stencil/tree/fix-ie11-polyfill
Let's hope they will check it fast and merge it, if the solution fits... 🙏🏻

[cary-smith]

Briefly checking [email protected], this issue still exists.

[manucorporat]

Fixed https://github.com/ionic-team/stencil/commit/5afaa7eee04e09ae626a06317ca82aec0bfd87c3