Syntax error in IE11 with Webpack, Babel and React
我在Internet Explorer 11的React Redux项目中遇到语法错误,但我不知道为什么引起此错误。
我正在使用Webpack和Babel对其进行编译。
我尝试使用babel-polyfill和babel-es6-polyfill,但这没有帮助。
这是我得到的错误:
1 2 | SCRIPT1002: Syntax error File: app.js, Line: 70, Column: 1 |
第70行的第1列是
1 2 3 4 5 6 7 8 9 10 | /***/ }), /* 21 */, /* 22 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("\ \ Object.define... <- Line 70 ^--- Column 1 |
这是我的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | 'use strict'; // Include modules and plugins const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); // App and build directories const APP_DIR = path.resolve(__dirname, 'src/'); const BUILD_DIR = path.resolve(__dirname, 'public'); // Extract sass from the application, see index.jsx const extractSass = new ExtractTextPlugin({ filename: 'css/[name].css' }); // The config file to load let env = (process.env.NODE_ENV || 'dev').toLowerCase(); let configFile = path.resolve(__dirname, 'config/config.' + env + '.json'); // Default config file if not found const defaultConfigFile = path.resolve(__dirname, 'config/config.dev.json'); /* * Config to be injected into the app * Note that JSON files are parsed upon requiring */ let config; /* * Get the actual config */ try { config = require(configFile); console.log('Loaded config file ' + configFile); } catch (e) { config = require(defaultConfigFile); console.log('Fallen back to default config file'); } // The actual webpack config const webpackConfig = { entry: { // The app entry point app: APP_DIR + '/index.jsx', // Vendor files will be used for bundling, they will not be compiled into the app itself vendor: [ 'axios', 'prop-types', 'react', 'reactstrap', 'react-chartjs-2', 'react-dom', 'react-redux', 'react-router', 'react-router-dom', 'redux', 'sprintf-js', ] }, output: { path: BUILD_DIR, filename: 'js/app.js' }, module: { /* * These are loaders for webpack, these will assist with compilation */ loaders: [ { /* * Use Babel to compile JS and JSX files * See .babelrc */ test: /\\.jsx?/, include: APP_DIR, loader: 'babel-loader' } ], rules: [ { /* * Sass/Scss compilation rules */ test: /\\.scss$/, use: extractSass.extract({ use: [ { loader: 'css-loader' }, { loader: 'sass-loader' } ], fallback: 'style-loader' }) }, { /* * JS(X) compilation rules * We need this, otherwise Webpack will crash during compile time */ test: /\\.jsx?/, loader: 'babel-loader' } ] }, plugins: [ /* * The CommonsChunkPlugin is responsible to create bundles out of commonly used modules * E.g. React, React Dom, etc */ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', // See entry.vendor filename: 'js/vendor.bundle.js' }), extractSass ], externals: { /* * The config external will be available to the app by using require('config') */ 'config': JSON.stringify(config) }, devServer: { contentBase: BUILD_DIR, compress: true, port: 7600, inline: true, }, }; if (env === 'production') { webpackConfig.devtool = 'hidden-source-map'; } else { webpackConfig.devtool = 'eval-source-map'; } module.exports = webpackConfig; |
我的依赖项:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | "dependencies": { "axios":"^0.16.1", "babel-core":"^6.24.0", "babel-loader":"^6.4.1", "babel-polyfill":"6.5.1", "babel-preset-es2015":"^6.24.0", "babel-preset-react":"^6.23.0", "babel-preset-stage-1":"^6.24.1", "chart.js":"^2.6.0", "cross-env":"^3.2.4", "css-loader":"^0.27.3", "enumify":"^1.0.4", "extract-text-webpack-plugin":"^2.1.0", "history":"^4.6.3", "ip":"^1.1.5", "lodash":"^4.17.4", "moment":"^2.18.1", "node-sass":"^4.5.1", "prop-types":"^15.5.10", "react":"^15.4.2", "react-addons-css-transition-group":"^15.5.2", "react-addons-transition-group":"^15.5.2", "react-chartjs-2":"^2.1.0", "react-dom":"^15.4.2", "react-js-pagination":"^2.1.0", "react-redux":"^5.0.4", "react-router":"^4.1.1", "react-router-dom":"^4.1.1", "reactstrap":"^4.5.0", "redux":"^3.6.0", "sass-loader":"^6.0.3", "sprintf-js":"^1.1.0", "style-loader":"^0.16.0", "webpack":"^2.3.2" }, "devDependencies": { "eslint-plugin-react":"^6.10.3", "webpack-dev-server":"^2.5.1" } |
还有我的.babelrc:
1 2 3 4 5 6 7 | { "presets" : [ "es2015", "react", "stage-1" ] } |
编辑1
按照BANANENMANNFRAU的回答,我添加了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { "presets" : [ ["env", { "targets": { "browsers": [ "last 5 versions", "ie >= 11" ] } }], "es2015", "react", "stage-1" ] } |
这没有帮助,它仍然导致IE11中的错误。
我知道已经过了一年,但是我相信问题是您的devtool配置:
1 | webpackConfig.devtool = 'eval-source-map'; |
IE11显然不是webpack为这些对象插入的eval()代码的粉丝。使用
使用
1 2 3 4 5 6 7 8 9 10 | { "presets" : [ ["env", { "targets": { "browsers": ["last 2 versions","ie >= 11"] } }], "react", ] } |
您还可以从配置中删除以下部分:
1 2 3 4 5 6 7 8 9 10 11 | loaders: [ { /* * Use Babel to compile JS and JSX files * See .babelrc */ test: /\\.jsx?/, include: APP_DIR, loader: 'babel-loader' } ], |
在此处检查文档