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,but how?

I am not using Babel.

Following is my Webpack.config

var webpack = require("webpack");
var Promise = require('es6-promise').Promise;
var paths = require('./config/paths');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');

var publicPath = '/';
var publicUrl = '';

module.exports = {
    entry: {

    app: [
    'core-js/fn/promise',

    './Generated Files/app.js'
],
    vendor: paths.vendorPath,
},
output: {
    path:__dirname + "/dist",
    filename: 'bundle.js',
    publicPath: publicPath
},
devtool: '#source-map',
resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
},
module: {
    loaders: [
      {
          test: /.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/
      },
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
          //exclude: /node_modules/,
      },
      {
          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
          loader: 'file',
          query: {
              name: 'static/media/[name].[hash:8].[ext]'
          }
      },
    ]
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.DefinePlugin({
      'process.env': {
          'NODE_ENV': JSON.stringify('development')
      }
  }),
new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
}),

// For using jQuery
     new webpack.ProvidePlugin({
     $: "jquery",
     jQuery: "jquery",
     'window.jQuery': 'jquery',
     'window.$': 'jquery',
 }),

new webpack.ProvidePlugin({
   "Promise": "promise-polyfill"
}),
  // new AureliaWebpackPlugin(),
    new webpack.optimize.CommonsChunkPlugin({/* chunkName= */name:"vendor", /* filename= */filename:'static/js/vendor.js'})
    ]
    };

Solution 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

Solution 2

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

Solution 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);
});

Solution 4

You need to add Promise polyfill.

Include polyfill in your bundle. https://github.com/stefanpenner/es6-promise

Load polyfill only if the browser / device need: https://www.npmjs.com/package/polyfill-io-feature-detection

Solution 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 :)

View more solutions

Comments

[Ankit Raonka]

how to add; require(es6-promise).polyfill gives error in .tsx code; should i add polyfill-io in entry path ie. app.js?

[José Quinto Zamora]

Include the es6 types as well with npm i -D @types/es6-promise

[Ankit Raonka]

yeah i did typings install es6-promise

[Adrian Florescu]

Does not work for me... Error: Can't resolve 'es6-promise-promise' and if I leave only Promise: 'es6-promise' nothing changes, same error...

[Ankit Raonka]

var Promise = require('es6-promise').Promise; put this in webpack and new webpack.ProvidePlugin({ Promise: 'es6-promise-promise', // works as expected }), in plugins

[gdubs]

how do you use provideplugin? do you add this on the webpack.config file?

[Balram Singh]

Added explanation @jacefarm

[Max Carroll]

Although you are using ts-loader instead of babel, I presume that will still ultimately do the transpiling, so the exclude, include is still relevant

[J_sdev]

Uncaught (in promise) [object Event]