es6 and bootstrap 4.3.1 have issues on IE11

[lekoala]

I've recently updated one of my website using polyfill.io to bootstrap 4.3.1 and now tooltips cause js error on IE11. The error goes away when removing polyfill.io or downgrading bootstrap to 4.3.0.

The issue seems linked to the "es6" bundle (if I only add es5, it works fine). Not sure which feature is causing the error, I'm still looking into it.

Bootstrap 4 issue for reference: twbs/bootstrap#28520

[lekoala]

By the way, i didn't find an easy way to isolate which es6 polyfill is causing the issue, it would be great to be able to load polyfills one by one from the bundle in order to do that. So if the api could return all polyfills wrapped in functions you would have to call manually and expose somehow this list to the browser, it would help a lot. How would you proceed in order to know which one is causing the issue in the current setup ?

[JakeChampion]

@lekoala Could you please create a reproducible example on a service such as jsbin.com? Having something like that available helps us be able to debug and fix the issue :-)

[XhmikosR]

@JakeChampion: from the Bootstrap issue https://codepen.io/Johann-S/pen/zbaJPV

[XhmikosR]

Oops that doesn't have polyfill.io. Here's the updated one with polyfill.io and direct link since CodePen doesn't work on IE: https://s.codepen.io/XhmikosR/debug/NmGBmM

[lekoala]

@XhmikosR thanks, thats the one! the pen is indeed breaking for me (and i guess anyone else in win 10 / ie 11)

[adamwinn]

I have narrowed it down to the Array.from bundle that is causing this bug

twbs/bootstrap#28520

[adamwinn]

The polyfill I'm using is https://cdn.polyfill.io/v3/polyfill.js?features=Object.assign,Array.from,Element.prototype.matches,Object.entries,Array.prototype.includes

Breaks:
https://cdn.polyfill.io/v3/polyfill.js?features=Object.assign,Array.from,Element.prototype.matches,Object.entries,Array.prototype.includes

Works:
https://cdn.polyfill.io/v3/polyfill.js?features=Object.assign,Element.prototype.matches,Object.entries,Array.prototype.includes

[EamonNerbonne]

I've narrowed this down; this looks like a bug in the symbol polyfill.

Context:

twbs is checking object property types based on toString in the function toType, which contains this expression {}.toString.call(obj).

The bootstrap popover component is hoping for a function or null (the linked config is passed to the checker here), and it's receiving null. And indeed, when you call {}.toString.call(null). all browsers (AFAICT) return [object Null], which eventually would return the correct classification.

However, the symbol polyfill overwrites toString here, and it's that code that's getting called, rather than the IE11 native method (verified using the debugger).

That function contains the snippet toString(this) where toString is the original function, and this should be null. But this polyfill isn't in use strict mode! So that means that this is never null, but window. That's easy to verify, and it's by-spec, so not an IE11 bug.

• (function (){ 'use strict'; return this; }).call(null) returns null: OK!
• (function (){ return this; }).call(null) returns window: not OK.
• and by extension (function() { 'use strict'; return (function (){ return this; }).call(null); })() also returns null.

So that means that either all polyfills should be in strict mode (no idea if that's realistic), or that at least the entire symbol polyfill should be in strict mode, or that at least the polyfilled toString should be in strict mode.

[EamonNerbonne]

#193 would be a conservative fix.

[lekoala]

@EamonNerbonne wow that's serious detective work there, thanks!

[EamonNerbonne]

Thanks! It was a fun little dive ;-).

The temporary workaround I'm using until this is fixed is the following, by the way:

if (document.documentMode) {
    const origToString = Object.prototype.toString;
    Object.prototype.toString = function () {
        'use strict'; //only necessary if you're not already running everything in strict mode anyohw.
        if (this === null)
            return '[object Null]';
        return origToString.call(this);
    };
}