Getting promise with undefined error in IE11

Question

I am converting React code into typescript, target in tsconfig - es5.

when starting in IE 11 I get the error message "Promise is undefined"

I know that I need a polyfill, but how?

I do not use Babylon.

Below 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'}) ] }; 

Answer 1

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

writing the above axios helped me maybe other options also worked

it was basically a cache problem in IE that I ran into

installing the es6-promise-promise plugin for web packages also worked

 npm install es6-promise-promise 

and turn on

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

in web package plugins

I will edit this answer with more possible options

Answer 2

You need to enable Polyfill for it to work in Internet Explorer.

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

Turn on polypropylene for browsers / devices that need it.

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

Answer 3

You need to add Promise polyfill.

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

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

Answer 4

Install these packages:

 npm install es6-promise npm install whatwg-fetch 

Then update your 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 5

You can use the babel-polyfill library, which is located in cdnjs and offers many polyfills, which I found useful for compatibility with IE (including Promises).

Note that you do not need to use the babel compiler to use this; just load the script and you are ready to go :)