×
Photo by Gianni Zanato on Unsplash

IE Still Breaking Promises... Literally

Written by John Vicari
3
This post is days old.

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.

John Vicari
John Vicari
Front End Developer
IE
Development
JavaScript
Suggested reading

Polyfills to support IE 11 and non ES6 browsers

JavaScript
Standard Polyfills for Front End Getting your JavaScript applications workin...
Read now

Orchestrating Web Server Integration Tests Using npm

JavaScript
It can be tricky to run integration tests targeting a web server using the co...
Read now

Vue Group Transitions

JavaScript
Simple transitions Vue.js has an extremely helpful was to handle animations ...
Read now

Vue CLI Environment Variables

JavaScript
In development it is common to not want to share everything in our code. Thin...
Read now

Computed Side Effects in Vue.js

JavaScript
In Vue computed properties are a life saver when it comes to being able to ad...
Read now

Global State versus Component State

JavaScript
State management, Redux, Vuex… whatever you want to call it or whatever flavo...
Read now

Comments

Stay fresh! The brighter green, the fresher the article!