CODEWITHSUNDEEP
reactjswebpackes6-promise
NiseNise
NiseNise

Reputation: 1162

How to get promises to work in IE10 with react

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;

Upvotes: 0

Views: 2148

Answers (3)

Velidan
Velidan

Reputation: 6004

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.

Upvotes: 1

mogelbrod
mogelbrod

Reputation: 2316

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

Upvotes: 0

Bruce Mu
Bruce Mu

Reputation: 893

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

import 'babel-polyfill';

Upvotes: 1

Related Questions