×
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

Random Vue Tips

Development JavaScript
Vue has been a delightful framework to work with. The first thing I noticed a...
Read now

The Pros and Cons of State Management

JavaScript
Let’s talk about state management for a minute. There’s recently been a bunch...
Read now

Communicating between components in separate scopes

JavaScript
Here at RIMdev, we are big fans of Vue.js, as we’ve written about before. It ...
Read now

Vue Import Paths

JavaScript
In today’s front-end ecosystem we are breaking down code into separate files ...
Read now

How child components can respond to store actions

JavaScript
At RIMdev, I spend most of my time writing Vue components. And I love it. But...
Read now

Why Does window.exports Unexpectedly Exist?

JavaScript
We ran across an issue where window.exports was being unexpectedly set. The ...
Read now

Comments

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