Vuex requires a promise polyfill in the browser

Internet Explorer Woes

Another day at work with me at constant warfare with browsers, old and new. This time, it’s Internet Explorer and not surprisingly, it comes up with a new technique.

If you’re here because you face the same problem, fret not.

But, why is this happening?

It’s because Internet Explorer is old. Yeah, I said it. It does not understand a lot of the new stuff like Promises, so you have to provide a polyfill for it.

What is a polyfill?

A polyfill is a re-write of something that should come natively with the browser, used for older browsers that do not have such luxury.

I found the promise polyfill here and included it as a script in my HTML right before I add other scripts.

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

Easy Peasy!

Conditions, conditions

You may not want to include the polyfill for all your browsers. In that case, you should definitely find out a way to detect what browser is used.

Your server could then decide whether or not to add the polyfill.

For PHP, you could use Jenssegers\Agent. I’ve found it to be really good.

With Laravel, it looks like

@if (Agent::isIE())
    <!-- Script for polyfilling Promises on IE9 and 10 -->
    <script src='https://cdn.polyfill.io/v2/polyfill.min.js'> 
    </script>
@endif

Have fun coding!