Webpack Build Fails to Render in IE11

Yes, it feels like crying, and so frustrating when the our ReactJS App runs well using webpack-dev-server, but fails (again, and again) using webpack — mode production.

SCRIPT1003: Expected ‘:’, that’s what I am talking about.

Webpacker uses Babel and Webpack to transpile modern JavaScript down to EcmaScript 5. Depending on what browser a project needs to support, the final Webpack output needs to be different. E.g. when we need to support IE11 we can rely on fewer JavaScript features. Hence our our output will be more verbose than when we only need support modern browsers.

ReactJS App projects often use Webpacker to preconfigure the Webpack pipeline for us.

UglifyJS also has compatibility settings

Most of the time (or even always), we use UglifyJS to compress the resulting code for production. Based on https://www.npmjs.com/package/uglify-js, UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit. Well, the resulting bundle is run through UglifyJS to remove comments, shorten variable names, etc. This results in a smaller file size (even if you are compressing with gzip afterwards).

Cautious, UglifyJS is not aware of your Babel plugins. Even when you configure Babel to support old IE, UglifyJS might rewrite the Babel output so it is no longer compatible with old IE. We had this issue when we used the Babel to dumb down shorthand object properties, but then UglifyJS would restore shorthand properties, since they are shorter. IE11 does not support shorthand properties.

You can configure UglifyJS’s browser support with many configuration options. The most important option is { ecma }. Setting this to { ecma: 5 } will usually result in broad compatibility with legacy browsers, while { ecma: 8 } will expect a modern JavaScript runtime.

Webpacker 3 breaks IE11

Webpacker has a bug where it hard-codes UglifyJS options to { ecma: 8 }. So no matter how many Babel plugins you use, the resulting output will break IE11.

You can work around this by changing your webpack.config.js to be something like this

optimization: {
 minimizer: [
  new UglifyJsPlugin({
   cache: true,
   parallel: true,
   uglifyOptions: {
    compress: false,
    ecma: 5,
    mangle: true,
   },
   sourceMap: true,
  }),
  new OptimizeCSSAssetsPlugin({}),
 ],
 runtimeChunk: 'single',
}

See the above ‘ecma’ attribute is set to ‘5’. Make sure this is set to ≤ 5.

Well, now the issue is resolved, freedom definitely.