How to build React app with Babel for Internet Explorer 11?

Question

// webpack.config.js

const webpack = require('webpack');
const precss = require('precss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PROD = process.env.NODE_ENV === 'production';

const jsPresets = [
  ['env', {
    targets: PROD ? {
      'browsers' : [
      'last 4 versions',
      'safari >= 7',
      'Explorer 11',
      ]
    } : {
      chrome: 1,
    },
  }],
  'es2015',
  'stage-1',
];

const baseConfig = {
  entry: [
    'babel-polyfill',
    'antd/dist/antd.css',
    './node_modules/m-react-splitters/lib/splitters.css',
    './node_modules/cli-truncate/index.js',
    'react-s-alert/dist/s-alert-default.css',
    'react-s-alert/dist/s-alert-css-effects/flip.css',
    'react-s-alert/dist/s-alert-css-effects/bouncyflip.css',
    'react-quill/dist/quill.snow.css',
  ],
  output: {
    path: './wp-content/plugins/clausehound/js',
    filename: 'clausehound.js',
  },
  module: {
    loaders: [{
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style', 'css?-url!postcss'),
    }, {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      include: /cli-truncate\/index.js/,
      loader: 'babel-loader',
      query: {
        presets: jsPresets,
        plugins: [
          ['import', { libraryName: 'antd' }],
          ['transform-es2015-arrow-functions'],
        ],
      },
    }, {
      test: /\.jsx/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: jsPresets.concat(['react']),
      },
    }],
    rules: [
      { test: /[\/]jquery\.js$/, use: 'expose-loader?$!expose?jQuery' }
    ],
  },

  postcss: () => [precss],

  plugins: [
    new ExtractTextPlugin('../css/clausehound.css', { allChunks: true }),
    new webpack.OldWatchingPlugin(),
  ],
};

// Modify config if production build or not
if (PROD) {
  module.exports = Object.assign({}, baseConfig, {
    plugins: baseConfig.plugins.concat([
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
      new webpack.DefinePlugin({
        process: {
          env: {
            NODE_ENV: JSON.stringify('production'),
          },
        },
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      [
      'transform-es2015-arrow-functions',
      'transform-class-properties',
      'syntax-class-properties',
      ],
    ]),
  });
} else {
  module.exports = baseConfig;
}

IE11 is breaking at arrow function syntax. Majority, if not all, of the node modules have arrow functions going on in them and I don't want to include the entirety of it in the bundled js file. I have the babel-loader running and just to test, I included the file from 'cli-truncate' that is throwing a syntax error to the baseConfig's entry property but the app still throws the error at () => in that package's index.js.

The exact line that the code fails from cli-truncate is this: module.exports = (input, columns, opts) => {..}

I don't think this is specific to this package but I am guessing I need to modify webpack config in some way, I am not sure. Any ideas how to resolve this?

Errors:

File:

I'm still learning react myself. However, whenever I see that error in the console seems to me like the Jquery library is missing? Might be far off though. — Jorden, Nov 22 '17 at 20:45
is this breaking on PROD env or dev?, from the screenshot I see syntax error, but I don't see what the the syntax error is. I would think this is more related to webpack configuration, maybe you should tag this as webpack also (if possible) — Kunukn, Nov 22 '17 at 20:51
@Jorden1337: The error stops rest of the js to execute so the first error is all that needs to be resolved in this case. — AspiringCanadian, Nov 22 '17 at 20:52
it seems like you have some file which is loaded/rendered where jQuery is required and jQuery itself is not loaded yet. — Naresh Thakur, Nov 22 '17 at 20:55
This has nothing to do with jQuery. The syntax error is breaking rest of the js. — AspiringCanadian, Nov 22 '17 at 20:58
Oh, you're right, but it is weird I thought babel converted arrow functions, const, template strings, to ES5 stuff. Did you add any presets? Maybe you need to include `babel-preset-es2015` and `babel-preset-stage-0`. Here's an answer if some code for it https://stackoverflow.com/a/33527883/340760 — BrunoLM, Nov 22 '17 at 21:04
`jsPresets` is how presets are being managed and if I add 'es2015' into it things break. :/ — AspiringCanadian, Nov 22 '17 at 21:07
Even after adding the `stage-0` and `es2015`, the const and arrow functions persist in the bundled js. — AspiringCanadian, Nov 22 '17 at 21:10

score 2 · Answer 1 · answered Nov 22 '17 at 21:11

2

To ensure you are supporting IE11 with Babel you also need to add it to your current list of env targets. For example:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "Chrome >= 59",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11",
          "last 4 Edge versions"
        ]
      },
      "useBuiltIns": true
    }],
    "react",
    "stage-1"
  ],
  "ignore": [
    "node_modules"
  ],
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-class-properties",
    "syntax-class-properties"
  ]
}

How to build React app with Babel for Internet Explorer 11?

1 Answers1