React app crashes in IE11 - reactjs

Question

We have a react app based on the react-production-starter boilerplate.
Our dev build runs fine in IE11, but for some reason our production build doesn't.
We get the following error:
Minified React error #109; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=t for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Here are the project dependencies:
"dependencies": {
"actual": "0.2.0",
"async": "2.1.4",
"attr-accept": "1.1.0",
"aws-sdk": "2.7.11",
"babel-register": "6.18.0",
"bcrypt": "1.0.0",
"body-parser": "1.15.2",
"canvas": "1.6.2",
"clipboard": "1.5.15",
"clor": "2.0.2",
"color-convert": "1.8.2",
"color-thief": "2.2.2",
"columnify": "1.5.4",
"compression": "1.6.2",
"cookie-parser": "1.4.3",
"cors": "2.8.1",
"couchbase": "2.2.4",
"couchnode": "4.3.4",
"cross-env": "3.1.3",
"debug": "2.3.3",
"dockerode": "2.3.1",
"dotenv": "2.0.0",
"elasticsearch": "12.1.0",
"email-templates": "2.5.4",
"express": "4.14.0",
"express-useragent": "1.0.4",
"fluent-ffmpeg": "2.1.0",
"geoip-lite": "1.1.8",
"glamor": "2.20.12",
"gsap": "1.19.0",
"handlebars": "4.0.6",
"history": "4.4.1",
"hpp": "0.2.1",
"image-size": "0.5.0",
"js2xmlparser": "2.0.2",
"json2csv": "3.7.2",
"kue": "0.11.5",
"lodash": "4.17.2",
"material-ui": "0.16.4",
"moment": "2.17.1",
"mongo-oplog": "cayasso/mongo-oplog#eba0c4fe6698854cd85442ef12da97fd74282dbc",
"mongodb": "2.2.16",
"morgan": "1.7.0",
"ms": "0.7.2",
"multer": "1.2.0",
"node-cache": "4.1.0",
"node-schedule": "1.2.0",
"normalize.css": "4.2.0",
"npm-run-all": "3.1.2",
"open-graph": "0.2.2",
"passport": "0.3.2",
"passport-facebook": "2.1.1",
"passport-google-oauth": "1.0.0",
"passport-local": "1.0.0",
"promise": "7.1.1",
"pug": "2.0.0-beta6",
"react": "15.4.1",
"react-addons-css-transition-group": "15.4.1",
"react-addons-shallow-compare": "15.4.1",
"react-anything-sortable": "matanasa/react-anything-sortable",
"react-avatar-editor": "6.1.0",
"react-canvas": "1.2.1",
"react-click-outside": "tj/react-click-outside",
"react-color": "2.10.0",
"react-confirm": "0.1.14",
"react-cropper": "0.10.0",
"react-custom-scrollbars": "4.0.0",
"react-dom": "15.4.1",
"react-ga": "2.1.2",
"react-gsap-enhancer": "0.3.0",
"react-helmet": "3.2.3",
"react-infinite-scroll-component": "Hazantip/react-infinite-scroll-component#master",
"react-key-handler": "0.3.0",
"react-masonry-component": "4.4.0",
"react-paginate": "4.0.0",
"react-redux": "4.4.6",
"react-rnd": "4.2.0",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-stickydiv": "3.4.19",
"react-swipeable": "3.7.0",
"react-tap-event-plugin": "2.0.1",
"react-text-input": "0.0.8",
"react-timer-hoc": "2.0.2",
"react-virtualized": "8.7.1",
"redial": "0.5.0",
"redlock": "2.1.0",
"redux": "3.6.0",
"redux-form": "6.2.1",
"redux-form-validation": "0.0.8",
"redux-logger": "2.7.4",
"redux-thunk": "2.1.0",
"request": "2.79.0",
"seamless-immutable": "7.0.1",
"sharp": "0.17.0",
"socketcluster-client": "5.1.1",
"sortablejs": "1.5.0-rc1",
"source-map-support": "0.4.6",
"ssh2": "0.5.4",
"superagent": "3.1.0",
"urijs": "1.18.4",
"vimeo": "1.2.0"
},
"devDependencies": {
"assets-webpack-plugin": "3.5.0",
"babel-cli": "6.18.0",
"babel-core": "6.18.2",
"babel-eslint": "7.1.1",
"babel-loader": "6.2.8",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-polyfill": "6.16.0",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-preset-stage-0": "6.16.0",
"babel-register": "6.18.0",
"chai": "3.5.0",
"chai-http": "3.0.0",
"chalk": "1.1.3",
"core-decorators": "0.14.0",
"css-loader": "0.26.1",
"eslint": "3.11.1",
"eslint-config-airbnb": "13.0.0",
"eslint-loader": "1.6.1",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.8.0",
"extract-text-webpack-plugin": "1.0.1",
"json-loader": "0.5.4",
"mocha": "3.2.0",
"nodemon": "1.11.0",
"npm-check": "5.4.0",
"opn": "4.0.2",
"react-copy-to-clipboard": "4.2.3",
"style-loader": "0.13.1",
"stylus": "0.54.5",
"stylus-loader": "2.4.0",
"webpack": "1.14.0",
"webpack-dev-middleware": "1.8.4",
"webpack-hot-middleware": "2.13.2"
},
Our .babelrc:
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy"]
}
Our webpack build:
const webpack = require('webpack');
const AssetsPlugin = require('assets-webpack-plugin');
const CONFIG = require('./webpack.base');
const { CLIENT_ENTRY, CLIENT_OUTPUT } = CONFIG;
module.exports = {
'devtool': 'source-map',
'entry': {
'main': [require.resolve('./polyfills'), CLIENT_ENTRY],
'vendor': [
'react',
'react-dom',
'react-router',
'redux',
'react-redux',
],
},
'output': {
'filename': '[name]_[chunkhash].js',
'chunkFilename': '[name]_[chunkhash].js',
'publicPath': '/assets/',
'path': CLIENT_OUTPUT,
},
'plugins': [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
'__DEV__': false,
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor_[hash].js', Infinity),
new AssetsPlugin({ 'filename': 'assets.json' }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
'compressor': {
'screw_ie8': true,
'warnings': false,
},
'mangle': {
'screw_ie8': true,
},
'output': {
'comments': false,
'screw_ie8': true,
},
}),
new webpack.NoErrorsPlugin(),
],
'resolve': {
'extensions': ['', '.js', '.styl'],
},
'module': {
'loaders': [
{
'test': /\.js$/,
'loader': 'babel',
'query': {
'cacheDirectory': true,
'presets': ['es2015', 'react', 'stage-0'],
'plugins': ['transform-decorators-legacy', 'transform-react-constant-elements', 'transform-react-inline-elements'],
},
'exclude': /(node_modules)/,
},
{
'test': /\.json$/,
'loader': 'json',
},
{
'test': /\.styl|\.css$/,
'loader': 'style-loader!css-loader!stylus-loader',
},
],
},
'stylus': {
'preferPathResolver': 'webpack',
},
};
Has anyone had similar issues with IE out there?

Answer 1

Remove transform-react-inline-elements from plugins list of babel-loader in webpack config file.
This requires ES6 Symbol, but it is not present in IE11.