React, Webpack and Babel for Internet Explorer 9

Question

Trying to support IE 9 for React. Upgraded to use babel 6.3.26 and babel-preset-es2015 and babel-preset-react for Webpack. However, when the file is loaded in IE 9, a syntax error occurs.

webpack.config.js

/* eslint-env node */
var path = require('path');
var packageJson = require('./package.json');
var _ = require('lodash');
var webpack = require('webpack');

var context = process.env.NODE_ENV || 'development';

var configFunctions = {
    development: getDevConfig,
    production: getProdConfig,
    test: getTestConfig
};

var config = configFunctions[context]();

console.log('Building version %s in %s mode', packageJson.version, context);

module.exports = config;

function getLoaders() {
    if (context.indexOf('test') === -1) {
        return [
            {
                test: /\.js?$/,
                exclude: /(test|node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    } else {
        return [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    }
}

function getBaseConfig() {
    return {
        context: __dirname + "/src",
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'bundle.js',
            publicPath: '/static/'
        },
        stats: {
            colors: true,
            reasons: true
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        module: {
            loaders: _.union(
                getLoaders(),
                [
                    {
                        test: /\.scss$/,
                        loader: 'style!css!sass'
                    },
                    {
                        test: /\.eot$|\.svg$|\.woff$|\.ttf$/,
                        loader: 'url-loader?limit=30000&name=fonts/[name]-[hash:6].[ext]'
                    },
                    {
                        test: /\.(png|.jpe?g|gif)$/,
                        loader: 'url-loader?limit=5000&name=img/[name]-[hash:6].[ext]'
                    },
                    {
                        test: /\.mp4$/,
                        loader: 'url-loader?limit=5000&name=videos/[name]-[hash:6].[ext]'
                    }
                ]
            )
        }
    };

}

function getDevConfig() {
    return _.merge({}, getBaseConfig(), {
        devtool: 'cheap-module-eval-source-map',
        entry: [
            'babel-polyfill',
            'webpack-hot-middleware/client',
            './App'
        ],
        plugins: [
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin()
        ],
        eslint: {
            emitError: false,
            failOnError: false,
            failOnWarning: false,
            quiet: true
        }
    });
}

function getProdConfig() {
    return _.merge({}, getBaseConfig(), {
        devtool: 'source-map',
        entry: [
            'babel-polyfill',
            './App'
        ],
        plugins: [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                compress: {
                    warnings: false
                }
            })
        ],
        eslint: {
            emitError: true,
            failOnError: true
        }
    })
}

function getTestConfig() {
    return _.merge({}, getBaseConfig(), {})
}

Checking bundle.js for the offending lines reveals the usage of const which is not ES5. Am I missing something here? Do I need to transpile ES6 code into ES5 for production usage?

Answer 1

IE9 is not compatible with ES6, so, yes, you must transform your ES6 code to ES5. I believe the problem is you aren't telling babel to use the react and es2015 presets. I'm sure you installed them on your machine, but the babel loader only does what you tell it.

Inside your getLoaders() function, add the presets to your babel loader configuration query:

query: {
  plugins: ['transform-runtime'],
  presets: ['react', 'es2015']
}

Hopefully, that works for you.

babel/babel-loader reference