Syntax error in IE11 with Webpack, Babel and React
Solution 1
I know it's over a year later, but I believe the issue was your devtool configuration:
webpackConfig.devtool = 'eval-source-map';
IE11 isn't a fan of the eval() code that gets inserted by webpack for those, apparently. Using webpackConfig.devtool = 'none'
(or one of the alternative values) should fix it.
Solution 2
Install babel-preset-env with npm install babel-preset-env --save-dev
and use the following config in your .babelrc
:
{
"presets" : [
["env", {
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
}
}],
"react",
]
}
You can also remove the following part from your config:
loaders: [
{
/*
* Use Babel to compile JS and JSX files
* See .babelrc
*/
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel-loader'
}
],
Check the docs here
Related videos on Youtube
IWRichard
Updated on September 11, 2020Comments
-
IWRichard over 3 years
I'm getting a Syntax Error in my React + Redux project in Internet Explorer 11, but I have no idea why it's caused.
I'm using Webpack and Babel to compile it.
I tried using babel-polyfill and babel-es6-polyfill, but that didn't help.
This is the error I'm getting:
SCRIPT1002: Syntax error File: app.js, Line: 70, Column: 1
Line 70 Column 1 is where the
eval
starts of Webpack:/***/ }), /* 21 */, /* 22 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("\n\nObject.define... <- Line 70 ^--- Column 1
This is my
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;
And my dependencies:
"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" }
And my .babelrc:
{ "presets" : [ "es2015", "react", "stage-1" ] }
EDIT 1
Following BANANENMANNFRAU's answer, I added
babel-preset-env
and edited my.babelrc
to be as follows:{ "presets" : [ [ "env", { "targets": { "browsers": [ "last 5 versions", "ie >= 11" ] } }], "es2015", "react", "stage-1" ] }
This didn't help, it still resulted in the error in IE11.
-
Tom Prats over 6 yearsDid you have any luck? I'm currently running into the same thing. I narrowed it down a little more by removing the source map, but babel-preset-env just doesn't seem to be including what it should.
-
Julia about 6 yearsFound solution in another topic stackoverflow.com/a/50372766/7801987
-
-
IWRichard almost 7 yearsI tried your solution but it didn't work, same result. I had to exclude
babelrc: false
, because it wouldn't compile otherwise. I added my.babelrc
to my post. Thanks for your post though. -
b-m-f almost 7 yearsAdd the stuff your babelrc instead. That is crucial info.