Javascript/Jquery Errors in Internet explorer

Question

I’ve done most of my programming debugging my website with chrome and recently took a look at the results in Internet explorer. The errors I’m getting do not show up in chrome. I believe I got each of these code snippets from other accepted answers here on stack overflow. Any help they can be given would certainly be appreciated. I did do some research and the Internet explorer (11) solution was not immediate for me

IE doesn't support arrow functions, await, for/of, and much more ... you need Babel here. — Andrea Giammarchi, Jul 16 '20 at 14:11
Does this answer your question? [Transpiling ES6 for IE11 with Babel](https://stackoverflow.com/questions/56446904/transpiling-es6-for-ie11-with-babel) — Greedo, Jul 16 '20 at 14:15
ECMAScript 6 - compatibility: https://kangax.github.io/compat-table/es6/ — toto, Jul 16 '20 at 14:39

score 1 · Accepted Answer · answered Jul 17 '20 at 08:07

The errors in the pictures are all due to IE doesn't support ES6/ES7 syntax. If you require ES6 features in Internet Explorer 11, check out a transpiler such as Babel. Here's an article about how to use babel to convert ES6 into ES5, please check it out.

Arrow function:

You should transpile it using Bable or change the syntax like below:

function sleep(ms) {
  return new Promise(function (resolve) {
    return setTimeout(resolve, ms);
  });
}

Promise:

You could refer to this thread about making promise work in IE. You could use a 3rd party promise library like Bluebird.

Object.entries():

You need to add a polyfill for it to work in IE 11:

if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };
}

async function:

You can use facebook/regenerator to polyfill async/await in IE 11.

You could follow the steps to support async/await in IE 11:

use babel-preset-env

yarn add regenerator or npm install regenerator

add node_modules/regenerator-runtime/runtime.js (10.7kb minified) into your bundle

Reference link: Add ES7 Async/Await Support for your Webapp in 3 Easy Steps

Your solution is very good and I can see the references that would make it work. However, I could not get it to work with webpack. I'm no webpack expert and frankly don't like webpack. The solution I ended up using was converting my elements to bootstrap carousels to create the same effect. It created the delays I needed without having to install god knows how many babel and webpack packages. — Pete, Jul 22 '20 at 12:34

Javascript/Jquery Errors in Internet explorer

1 Answers1