reactjs - React 应用程序在 IE11 中崩溃

Question

我们有一个基于 react-production-starter 的 React 应用程序样板文件。我们的开发版本在 IE11 中运行良好，但由于某种原因我们的生产版本却不能。我们收到以下错误:

• 缩小 React 错误#109；访问http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=t获取完整消息，或使用非缩小开发环境获取完整错误和其他有用的警告。

以下是项目依赖项:

"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"
  },

我们的.babelrc:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"]
}

我们的 webpack 构建:

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',
    },
};

有人在使用 IE 时遇到过类似问题吗？

Answer 1

从 webpack 配置文件中的 babel-loader 的 plugins 列表中删除 transform-react-inline-elements。

这需要 ES6 Symbol，但 IE11 中不存在。