Webpack-dev-server: IE 11 support

[shablenko]

• Operating System: Ubuntu 16.04
• Node Version: 6.0.0
• NPM Version: 3.8.6
• webpack Version: 3.10.0
• webpack-dev-server Version: 2.11.0

• [x] This is a bug
• [ ] This is a modification request

Code

main config

  const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CriticalPlugin = require('webpack-plugin-critical').CriticalPlugin;

const ENV = process.env.NODE_ENV || 'development';
const CONFIG = require('./config');
const WEBPACK_CONFIG = require('./webpack.' + ENV + '.config.js');

module.exports = Object.assign({}, WEBPACK_CONFIG, {
  entry: {
    app: [CONFIG.vendor, CONFIG.entry]
  },
  output: {
    path: CONFIG.dest,
    filename: '[name].bundle.js',
    chunkFilename: '[id]_[name].chunk.js',
    publicPath: CONFIG.publicPath
  },
  module: {
    rules: [].concat(
        WEBPACK_CONFIG.module && WEBPACK_CONFIG.module.rules || [],
        [
          {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: {
              loader: 'url-loader',
              options: { limit: 10000, minetype: 'application/font-woff' }
            }
          },
          {
            test: /\.(ttf|eot|svg|png|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: 'file-loader'
          }
        ]
    )
  },
  plugins: [].concat(
      [
        new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(ENV) }),
        new webpack.ProvidePlugin({
          React: 'react',
          moment: 'moment-timezone',
          numbro: 'numbro',
          pikaday: 'pikaday'
        }),
        new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          minChunks: module => {
            if(module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
              return false;
            }

            return module.context && module.context.includes('node_modules')
          }
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'handsontable',
          minChunks: module => module.resource && /(handsontable|handlebars)/.test(module.resource)
        }),
        new CopyWebpackPlugin([
          { from: CONFIG.assets, to: CONFIG.dest },
          { from: CONFIG.ctpFont, to: CONFIG.dest, ignore: ['*.css', '*.scss'] }
        ], { ignore: [] }),
        new HtmlWebpackPlugin({
          path: CONFIG.dest,
          favicon: `${CONFIG.entry}/favicon.ico`,
          template: `${CONFIG.entry}/index.ejs`,
          hash: true
        }),
        new ExtractTextPlugin({ filename: 'styles.bundle.css', allChunks: true }),
        new HtmlWebpackPlugin({
          filename: `${CONFIG.dest}/index.html`,
          template: `${CONFIG.entry}/index.ejs`,
          favicon: `${CONFIG.entry}/favicon.ico`,
          minify: {
            removeRedundantAttributes: true,
            removeComments: true,
            minifyCSS: true,
            collapseWhitespace: true
          },
          inject: true
        }),
        new CriticalPlugin({
          src: 'index.html',
          inline: true,
          minify: true,
          dest: 'index.html'
        }),
      ],
      WEBPACK_CONFIG.plugins || []
  )
});

config part for development

  const webpack = require('webpack');
const proxyMiddleware = require('http-proxy-middleware');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const config = require('./config');
const WEBPACK_PORT = config.port + 1;

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: config.entry,
        use: [
          { loader: 'babel-loader' },
          {
            loader: 'eslint-loader',
            options: { failOnWarning: false, failOnError: false, fix: false, quiet: false }
          }
        ]
      },
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
          use: [
            { loader: 'css-loader' },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [autoprefixer];
                }
              }
            },
            { loader: 'sass-loader' }
          ]
        })
      }
    ]
  },
  watch: true,
  devtool: 'source-map',
  devServer: {
    clientLogLevel: 'none',
    historyApiFallback: true,
    quiet: false,
    noInfo: false,
    disableHostCheck: true,
    stats: {
      assets: false,
      colors: true,
      version: false,
      hash: false,
      timings: false,
      chunks: true,
      chunkModules: false
    },
    port: WEBPACK_PORT
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      errorDetails: true,
      debug: true
    }),
    new BrowserSyncPlugin({
      open: config.mode,
      host: config.host,
      port: config.port,
      proxy: {
        target: `localhost:${WEBPACK_PORT}`,
        middleware: config.api.map(api => proxyMiddleware(
            api,
            {
              target: config.proxy,
              secure: !/^https/.test(config.proxy)
            }
        ))
      }
    })
  ]
};

Expected Behavior

Successfully compile code, and render application in IE 11

Actual Behavior

Successfully compile code and render application in all browsers except IE 11(maybe <11 too)

Reproduces only with dev server and browser sync. Currently i am receiving error with message

SCRIPT5007: Unable to get property 'call' of undefined or null reference

the line looks like

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

When i disable commonChunksPlugin i am receiving error

SCRIPT5009: 'webpackJsonp' is undefined line 1

Works in IE if built for production (first part of config with enabled uglify plugin)

[shablenko]

As mentioned in https://github.com/webpack/webpack-dev-server/issues/1278
Build works with dev-server 2.9.7

[pajasevi]

I have a similar issue. ansi-regex dependency breaks IE11 because it contains:

module.exports = () => {
    const pattern = [

Please fix this.

[paveleremin]

+1 have same issue, it's because of arrow functions in code

[lydell]

Hi! As you already noticed, this is already tracked in #1278. You can help the maintainers of this repo by closing this issue and 👍:ing the other one!

Also see my analysis of the problem here: https://github.com/webpack/webpack-dev-server/issues/1278#issuecomment-358443674

Luckily, we can just go back to 2.9.7 for the time being :)

[SpaceK33z]

Published [email protected] with the fix.

[houzhitaohzt]

+1 have same issue, it's because of arrow functions in code
module.exports = () => {
const pattern = [
'[\u001B\u009B][[\]()#;?](?:(?:(?:[a-zA-Z\d](?:;[a-zA-Z\d]))?\u0007)',
'(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PRZcf-ntqry=><~]))'
].join('|');

return new RegExp(pattern, 'g');

};

"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.2.1"