How to get promises to work in IE10 with react - reactjs

Question

I am trying to fetch data using promise in my react application. I installed and implemented this polyfill es6-promise but works for IE11 on window 8 but IE10 window 7 is says 'promise are undefined'. I assumed the polyfill is meant to cover all IE9+, but it is just not working for me. Has anyone come across this problem? Am I missing something in the implementation of the es6-promise polyfill with webpack??
// calling it my jsx file
import React, { PropTypes } from 'react';
import es6promise from 'es6-promise'; // not sure if I need this in the jsx file also??
promise.polyfill();
import 'isomorphic-fetch';
class App extends React.Component {
...
}
App.propTypes = propTypes;
export default App;
webpack.config.js
var promise = require('es6-promise').polyfill();
switch (TARGET) {
case 'build':
module.exports = mergeConfig({
plugins: [
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript. Loaders are switched into minimizing mode
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.ProvidePlugin({
PROMISE: promise
})
]
});
break;

Answer 1

You can try babel-polyfill.
After install it as dependency.
Import it in your app.js
import 'babel-polyfill';

Answer 2

I have an another interesting solution (it works for me in that case). I didn't want to import a polyfill into every file so I provided via WebpackProvidePlugin.
new webpack.ProvidePlugin({
"Promise": "babel-polyfill",
'fetch': 'imports-loader?this=>global!exports-loader?
global.fetch!whatwg-fetch'
})
So now I can use these stuff without importing into every file. And a very important note. Some resources are suggesting to use es6-promise instead babel-polyfill, I tried to use it but it doesn't work for me. Looks like es6-promise-polyfill didn't work in case of using webpack + babel. So I switched to the babel-polyfill. Tested in the IE11 and all is fine.
Hope it helps.
Best Regard. Velidan.

Answer 3

I recommend using the native-promise-polyfill npm module, especially if you don't need the other features babel-polyfill includes:
This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions