webpack-dev-server 2.9.1 produces SCRIPT1002: Syntax error in Internet Explorer 10 and below

[01Kuzma]

• Operating System: Windows 10
• Node Version: 8.3.0
• NPM Version: 5.4.2
• webpack Version: 3.7.1
• webpack-dev-server Version: 2.9.1

• This is a bug

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');

const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname);
const buildPath = path.join(__dirname, 'dist');

module.exports = {
    stats: {
        warnings: false
    },
    devtool: 'cheap-eval-source-map',
          devServer: {    
          historyApiFallback: true,
          contentBase: './'
      },
    entry: {
        app: path.resolve(sourcePath, 'index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
        modules: [
            sourcePath,
            path.resolve(__dirname, 'node_modules')
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.[chunkhash].js',
            minChunks: Infinity
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer({
                        browsers: [
                            'last 3 version',
                            'ie >= 10'
                        ]
                    })
                ],
                context: staticSourcePath
            }
        }),
        new webpack.HashedModuleIdsPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'index.html'),
            path: buildPath,
            excludeChunks: ['base'],
            filename: 'index.html',
            minify: {
                collapseWhitespace: true,
                collapseInlineTagWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true
            }
        }),
        new PreloadWebpackPlugin({
            rel: 'preload',
            as: 'script',
            include: 'all',
            fileBlacklist: [/\.(css|map)$/, /base?.+/]
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new CompressionPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
            threshold: 10240,
            minRatio: 0.8
        })      
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['env', 'react'],
                  }
                },
                include: sourcePath
            },
            {                
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { minimize: true } },
                        'postcss-loader',
                        'sass-loader'
                    ]
                })
            },
            {
                test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
                use: 'file-loader?name=assets/[name]-[hash].[ext]'
            },
            {
                test: /\.(png|gif|jpg|svg)$/,
                use: [
                    'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
                ],
                include: staticSourcePath
            }
        ]
    }
}; 

Expected Behavior

Run app on IE 10 and 9 without errors

Actual Behavior

The webpack-dev-server 2.9.1 version produces error in Internet Explorer 10 and below:
SCRIPT1002: Syntax error and the line - const url = __webpack_require__(83);
Setting the devtool to: devtool: 'cheap-eval-source-map' shows this error: SCRIPT1002: Syntax error - line with eval()
On remoter server - SCRIPT5009: 'Set' is undefine

Once downgraded to 2.7.1 fixed the error.
But on IE9 the error SCRIPT5009: 'Set' is undefine remains

Here is a little bit more information regarding this error:
https://stackoverflow.com/questions/46651499/react-webpack-and-babel-for-internet-explorer-10-and-below-produces-script1002

[shellscape]

Please do make sure you're perusing all of the info on the README 😉 https://github.com/webpack/webpack-dev-server#caveats

There are also several issues which address this which have enjoyed discussion and have been closed (#1136, #1101, #1104, #1084). Please try the search function on issues before creating another in the future 🔎

[Vandivier]

@shellscape what do you mean by supporting the last two major versions of major browsers? It seems to me IE 10 is within that definition.

[mdocter]

I just encountered this issue with IE 11, but it's also present in my production build, so it might be webpack related. Not webpack-dev-server related.

[mdocter]

Correction. It's neither webpack nor webpack-dev-server. My code contained ES6 syntax (probably arrow functions), which isn't supported by IE 10 or IE 11 and wasn't transpiled because I was targeting ES6 from TypeScript. Duh :-) Thought I could do that, because of an ES6 polyfill I load globally from some CDN.

This SO answer pointed me in the right direction.

The correct way to fix this in your tsconfig.json file is:

  "compilerOptions": {
    "target": "es5",
    ...
    "lib": ["dom", "es6"]
  },

[sekoyo]

I get this error using webpack 4 with no special customisations, no typescript, very simple setup (and using mode correctly for prod and dev builds - both fail). This is on a library that webpack-devserver is loading, not the app itself which also has the same browserlist settings.

module.exports = [
  {
    mode: 'development',
    output: {
      library: 'mockster',
      libraryTarget: 'umd',
      filename: 'mockster.js',
    },
  },
  {
    mode: 'production',
    output: {
      library: 'mockster',
      libraryTarget: 'umd',
      filename: 'mockster.min.js',
    },
  },
];

Using babel-prese-env with "browserslist": "last 2 versions, ie 11",.

So in summary does anyone know how to fix this? Thanks

[vikashpisces]

I did have the similar situations. Using babel-polyfill npm package worked for me for IE 9,10 and 11 versions.

[jinnyMcKindy]

change your webpack.config to this:

const path = require('path');
module.exports = {
  devtool: "source-map",
  entry: ['babel-polyfill', path.resolve(__dirname, './yourjs.js')],
  mode: 'production',
  output: {
    path: __dirname+'/draft.iml.ru/static/main/js/',
    filename: 'yout.js'
  }
};

You have to to add devtool : "source-map" option.