Getting Error Promise is undefined in IE11

Question

I am converting React code to typescript, target in tsconfig is es5.

on running in IE 11 i get an error \"Promise is undefined\"

I know i need to polyfill,bu

Answer 1

var ES6Promise = require("es6-promise");
ES6Promise.polyfill();
var axios = require("axios");

writing this above axios worked for me maybe other options also worked

it was mainly a cache issue in IE that i was facing

installing es6-promise-promise webpack plugin also worked

npm install es6-promise-promise

and include

new webpack.ProvidePlugin({
    Promise: 'es6-promise-promise', // works as expected
});

in webpack plugins

i will edit this answer with more possible options

Answer 2

Install these packages:

npm install es6-promise
npm install whatwg-fetch

Then update weback configuration:

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: ['whatwg-fetch', './index.js'],    <========== add whatwg-fetch  !!!! 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {extensions: ['.js', '.jsx']},
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ template: 'index.html' }),
    new webpack.ProvidePlugin({ 
      React: 'react', 
      Promise: 'es6-promise'               <============ add Promises for IE !!! 
    }), 
   ],
  module: ...

Answer 3

Add this script:

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

After that you can test in the console if the Promise is working in IE

var promise = new Promise(function (resolve, reject) {
setTimeout(function () {
    resolve('bar');
}, 1000);
});
promise.then(function(result) {
  console.log(result);
});

Answer 4

As of Babel 7.4.0

ES6 Promises are just one problem you will have more such as the new assignment operator and more. There's a few things you have to do to get your React soloution working nicely for IE11

• core-js will provide most of the pollyfills you need (although an extra one is required for fetch)
• isomporphic-fetch - because this isn't provided by core-js
• are-you-es5 - The common practice is to not transpile your node modules, however some modules are written in ES6 or above then they just won't work, so you can use are-you-es5 together with webpack to generarte include and exclude patterns of what and what not to transpile

Polyfills

According to @babel/pollyfill use core-js like this

its important to note that @babel/pollyfill have advised to use core-js instead

Answer used for a similar problem on SO here

// install packages
npm install core-js
npm install regenerator-runtime
npm install isomorphic-fetch

// then in your entry point (index.ts or index.js)
import "isomorphic-fetch"
import "core-js/stable";
import "regenerator-runtime/runtime";

Configure Webpack to transpile the relevant node_moduels

npm install are-you-es5

in your webpack config file

import {
  checkModules,
  buildIncludeRegexp,
  buildExcludeRegexp
} from 'are-you-es5'

const result = checkModules({
  path: '', // Automatically find up package.json from cwd
  checkAllNodeModules: true,
  ignoreBabelAndWebpackPackages: true
})

/** Returns the regexp including all es6 modules */
const es6IncludeRegExp = buildIncludeRegexp(result.es6Modules)

/** Returns the regexp excluding all es6 modules */
const es6ExcludeRegexp = buildExcludeRegexp(result.es6Modules)


{
  ...
  module: {
    rules: [
      {
        test: /\.(t)sx?$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/,
      },
      {
        test: /\.(j)sx?$/,
        use: {
          loader: "babel-loader",
        },
        exclude: es6ExcludeRegexp, // don't transpile these!!!
        include: es6IncludeRegExp  // tranpile these 
      }
    ]
  }
}

It took me a long time to get everything working for IE11 hopefully this will save people the pain I went through.

Answer 5

You can use the babel-polyfill library which can be found in cdnjs and offers a plethora of polyfills that I found useful for IE compatibility (including Promises).

Note that you don't have to use the babel compiler to use this; simply load the script and you are good to go :)

Answer 6

You need to include Polyfill to make it work in Internet Explorer.

import { polyfill } from 'es6-promise'; polyfill();

Include polypill for browsers/devices that need it.

https://www.npmjs.com/package/polyfill-io-feature-detection