mykeels.com

IE Wahala — Vuex requires a polyfill

I got assigned another IE issue today. A page with vue components wasn’t working well on Internet Explorer.

2017-10-25

IE Wahala — Vuex requires a polyfill

I got assigned another IE issue today. A page with vue components wasn’t working well on Internet Explorer.

Raise your hand if I’ve given you nightmares — IE

Getting IE

It took a while to get a computer that had Internet Explorer. I first tried to emulate Internet Explorer with Chrome using the IE Tab tool.

Turns out, it doesn’t work on Macs.

Trying BrowserStack

I then tried to use Browser Stack, which I think is plain awesome.

A cross-browser testing tool which just rocks!

Unfortunately, to emulate IE, you need a paid plan and I just wasn’t that desperate … no, really 😭

Tricking BrowserStack (or attempting to)

So, I tried a trick. I used Edge, then tried to run it using User Agents for Internet Explorer 9, 10 and 11.

Nope, no good … the page still worked perfectly.

Accepting defeat

Nothing beats an actual Windows OS for emulating IE, ehn?

So I got a laptop that ran Windows 10, fired up what I think is Internet Explorer 11 and got started.

Turned out the problem was:

vuex requires a promise polyfill in this browser

Yup, it’s beginning to look like all IE woes can be solved with polyfills.

In this case, the polyfill needed was for JavaScript promises.

All I had to do was add:

<!-- Script for polyfilling Promises on IE9 and 10 -->
<script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>

to my PHP file just before the script with Vue components, and all would be well.

But what about Optimization?

Because the issue only occurred on IE, it didn’t make for good optimization to have the polyfill script on every browser.

We could detect the browser type from user-agent string in the request object and decide whether or not to render the polyfill script tag, which is exactly what I did.

Thankfully, this GitHub repo had the perfect user-agent detector module for PHP and Laravel.

And so it became:

@if (Agent::isIE())

<!-- Script for polyfilling Promises on IE9 and 10 -->

<script src='https://cdn.polyfill.io/v2/polyfill.min.js'></script>

@endif

Yippeee!

Page now works beautifully on all browsers I’ve tested including IE.

Hooray for polyfills!

Hooray for JavaScript!!

Hooray for Laravel, W3C specifications, Open Source and the Internet!!!

Related Articles

Tags