2017-01-12 3 views
2

react-production-starter 상용구를 기반으로 한 반응 앱이 있습니다. 우리의 dev 빌드는 IE11에서 정상적으로 실행되지만, 우리의 생산 빌드는 그렇지 않습니다. 다음 오류가 발생합니다.IE11에서 실제 앱이 다운 됨

은 프로젝트 종속성은 다음과 같습니다,

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

우리 웹팩 빌드 :

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와 비슷한 문제가 있습니까?

+1

방금 ​​발생한 오류의 전체 텍스트는 다음과 같습니다. t.render() : 유효한 React 요소 (또는 null)를 반환해야합니다. undefined, 배열 또는 다른 잘못된 객체를 반환했을 수 있습니다. –

+0

예,하지만이 특정 브라우저에서만 및 프로덕션 빌드 후에 발생합니다. – LevEidel

+0

.babelrc 또는 webpack 구성이 바벨 트랜스 라이팅과 관련이 있습니까? + babel-polyfill을 포함하고 있습니까? –

답변

1

webpack 구성 파일에서 plugins 목록이 babel-loader 인 경우 transform-react-inline-elements을 제거하십시오.

이 경우 ES6 Symbol이 필요하지만 IE11에는 없습니다.