IE Still Breaking Promises... Literally

I could probably rant and rave about Internet Explorer (IE) for a couple of hours, reminiscing about busted box models, janky IE specific hacks, and other joys that came with supporting a browser that never died. It might get some good laughs, but only because we know we’re (almost) free and clear.

However, just when IE is finally an afterthought, not so much as a blip in my thought process, it peers over my shoulder with that stupid smirk.

The Scenario

We run a few static sites built with Jekyll, which runs on the Liquid template language. Vue.js was stitched in to give us some more flexibility for functionality. One of the Vue components we created utilized Axios, a promise based http client for the browser and Node.js.

The Problem

So, it turns out IE doesn’t support Promises natively, thus killing our shiny new component. Side note, IE throws up on all of ES6, so be sure to translate, more on this below.

The Solution

The first thing I realized was that I wasn’t translating my ES6 code to something IE could handle, the package babel-preset-env will do that for you. Install the package and create a .babelrc file in the root of your project that includes:

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [ "last 2 versions", "ie >= 11" ],
          "es2015": { "modules": true }
        }
      }
    ]
  ]
}

There are tons of helpful settings and configurations available to you, check out some of the examples.

Secondly, I needed IE to be able to work with Promises. The package es6-promise provides a polyfill for Promises. There are a few ways to incorporate this package into your project. After installing it, you can either use it at a specific instance or polyfill the global environment. I chose to auto polyfill global, to do that, import the package in your main js file with:

import 'es6-promise/auto';

Depending on your setup, you may need to use:

require('es6-promise/auto');

Nothing else is required, the polyfill will patch the global environment when called.

Final Thoughts…

At this point, IE is an afterthought, but every once in a while something comes up taking you back to those glory days. Stay tuned for my next post, An In-Depth Look at the Rise and Fall of GeoCities.