Błąd składniowy w IE11 z Webpack, Babel i React


W moim projekcie React + Redux w programie Internet Explorer 11 pojawia się błąd składni, ale nie mam pojęcia, dlaczego jest wywoływany.
Do kompilacji używam Webpack i Babel.
Próbowałem użyć babel-polyfill i babel-es6-polyfill, ale to nie pomogło.
Oto błąd, który otrzymuję:
SCRIPT1002: Syntax error
File: app.js, Line: 70, Column: 1

Wiersz 70 w kolumnie 1 to miejsce, w którym
eval
zaczyna się od Webpack:
/***/ }),
/* 21 */,
/* 22 */
/***/ (function(module, exports, __webpack_require__) {"use strict";
eval("\n\nObject.define... <- Line 70
^--- Column 1

To jest mój
webpack.config.js
:
'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;

I moje zależności:
"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"
}

I mój .babelrc:
{
"presets" : [
"es2015",
"react",
"stage-1"
]
}


EDIT 1

Idąc za odpowiedzią BANANENMANNFRAU, dodałem
babel-preset-env
i zredagowałem
.babelrc
w następujący sposób:
{
"presets" : [
[ "env", {
"targets": {
"browsers": [
"last 5 versions",
"ie >= 11"
]
}
}],
"es2015",
"react",
"stage-1"
]
}

To nie pomogło, ale nadal powodowało błąd w IE11.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Wiem, że było to ponad rok później, ale myślę, że problem dotyczył twojej konfiguracji devtool:
webpackConfig.devtool = 'eval-source-map';

IE11 nie wydaje się być fanem kodu eval (), który wstawia dla nich webpack. Używając
webpackConfig.devtool = 'none'
(lub jednego z

alternatywne wartości
https://webpack.js.org/configuration/devtool/) powinno to naprawić.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

zainstalować

babel-preset-env
https://github.com/babel/babel-preset-env
z
npm install babel-preset-env --save-dev
i użyj następującej konfiguracji w swoim
.babelrc
:
{
"presets" : [
["env", {
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}],
"react",
]
}

Możesz również usunąć następującą część ze swojej konfiguracji:
loaders: [
{
/*
* Use Babel to compile JS and JSX files
* See .babelrc
*/
test:/\.jsx?/,
include: APP_DIR,
loader: 'babel-loader'
}
],

Sprawdź dokumenty

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się