Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting Error Promise is undefined in IE11

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'})     ]     }; 
like image 343
Ankit Raonka Avatar asked Mar 01 '17 13:03

Ankit Raonka


People also ask

Do promises work in IE11?

IE11 does not support this object, so you should use a polyfill like es6-promise. Some libraries and languages make distinctions between futures, deferreds and promises.

Is IE11 undefined?

IE 11 and all other browsers provides undefined values in windows 7 when accessing a link for print.

Is promise supported in Internet Explorer?

'Promise' is undefined in Internet Explorer (IE 11)


1 Answers

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

like image 76
Ankit Raonka Avatar answered Oct 08 '22 13:10

Ankit Raonka