Reputation: 6857
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'})
]
};
Upvotes: 48
Views: 88665
Reputation: 4869
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
are-you-es5
together with webpack to generarte include
and exclude
patterns of what and what not to transpileAccording 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";
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.
Upvotes: 2
Reputation: 1332
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);
});
Upvotes: 9
Reputation: 1754
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
Upvotes: 15
Reputation: 6857
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
Upvotes: 38
Reputation: 4495
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: ...
Upvotes: 1
Reputation: 5506
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 :)
Upvotes: 3
Reputation: 2128
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
Upvotes: 6