babel: polyfill Array.from for IE11 support

Question

I'm currently having trouble getting my React application working in IE11. The problem seems to be that some of the newer ES6 stuff isn't available in IE11. So my goal is to polyfill the missing functionality. I'm using nwb [1] which is a zero-configuration setup for React applications. However, I'm unsure how to configure Babel (or Webpack ?) to polyfill certain methods like Array.from. It looks like fetch, Promise, and Object.assign are all polyfill-ed but not Array.from for example. Any help would be greatly appreciated.

Here is my nwb.config file:

module.exports = {
         type: 'react-app',
webpack: {
    define: {
        VERSION: JSON.stringify(require('./package.json').version),
        HOSTNAME: JSON.stringify(process.env.NODE_ENV === 'production' ?
                  'https://xyz.azurewebsites.net' :
                  'http://localhost:8080')
    },
    rules: {
        babel: {
            test: /\.jsx?/
        }
    },
    extra: {
        resolve: {
            extensions: ['.jsx']
        },
        devtool: '#inline-source-map'
    },
    html: {
        favicon: 'src/img/favicon.ico'
    }
}
};

Thanks,

[1] A toolkit for React app. https://github.com/insin/nwb

Do you have access to the `webpack.config.js` file? If so, can you post it? — Chase DeAnda, Jun 13 '17 at 19:30
I added my nwb.config.js file since I dont have a webpack.config.js. Since nwb configures it. Anyways here is the babel documentation: https://github.com/insin/nwb/blob/master/docs/Configuration.md#babel-configuration — Gerb, Jun 13 '17 at 19:34

score 2 · Answer 1 · answered Jun 13 '17 at 19:44

Sounds like you need to add babel-polyfill to your project.

This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node.

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 (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

The easiest way for you would probably be to import it at the top of your main js file:

import 'babel-polyfill';

babel: polyfill Array.from for IE11 support

1 Answers1