Webpack-dev-server: WDS Disconnecting with HTTPS

[callensm]

Running WDS version: 2.4.5

I'm currently running my React application from the webpack-dev-server using the following configuration file:

// webpack.config.js
/* eslint no-var: 0 */

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: {
    'controller-bundle': path.resolve(__dirname, './src/js/sym-controller.js'),
    'app-bundle': path.resolve(__dirname, './src/js/sym-app.js'),
    bundle: path.resolve(__dirname, './src/js/index.js')
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('style.css'),
    new HtmlWebpackPlugin({
      template: './src/html/controller.html',
      filename: 'controller.html',
      chunks: ['controller-page']
    }),
    new HtmlWebpackPlugin({
      template: './src/html/app.html',
      filename: 'app.html',
      chunks: ['app-page']
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js(x)?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    host: '0.0.0.0',
    port: 4000,
    https: true,
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
}

The problem I'm running into is that while the https flag for WDS is set to true, the application continuously throws an error:

[WDS] Disconnected!

and immediately refreshes the page. (maybe once a second or two)

When https is set to false this doesn't happen, but I need the application to run with https on. I've seen this as an issue on the github issues section for webpack but cannot seem to find a clear, straight answer as the why this is happening and how to fix it.

The closest thing I've seen to an explanation is that its due to a mismatch or incomplete handshake between websockets and the dev-server itself. In case I'm able to use it to fix the issue, I have the dev-server's server.pem file extracted from the node module package.

[bseiller]

Might this be a duplicate of #851?

[callensm]

@bseiller No, my issue is resolved on the removal of the --https flag, while that post has no reference to that as the problem.

[callensm]

Temporarily resolved by mounting onto a self-signed express server using webpack-dev-middleware.

Still an issue worth resolving entirely.

[jayryemure]

I seem to be getting a very similar, if not exact, issue with https enabled. When reloading the page I'll get between zero to four [WDS] Disconnected! (causing another reload) until it seems to settle in and work normally.

Race condition perhaps?

Chrome: 59.0.3071.109 (latest)
Webpack-Dev-Server: 2.4.5

[callensm]

@jayryemure sounds about right!

At first I thought it may have been an issue with the SSL certificate that is generated for the instance but if it eventually settles and remains connected, then that probably isn't it.

[jayryemure]

@callensm If I throttle the network under Chrome > Developer Tools > Network to DSL or lower I seem to never get disconnects in my particular application.

[bseiller]

@callensm: In fact it seems to be an issue with the SSL certificate - but Chrome does a bad job of telling us.

We had the same problem and I created a new self-signed certificate (pem) including SAN (Subject Alternative Name) with openssl as per

• https://github.com/angular/angular-cli/issues/4839#issuecomment-285793753
• https://github.com/angular/angular-cli/issues/4839#issuecomment-310422777
• https://bugs.chromium.org/p/chromium/issues/detail?id=704199#c6

and used it to replaced
node_moduleswebpack-dev-serversslserver.pem
Also the cert had to be imported into Chrome as a Trusted Root.
It was quite a haggle to get there but finally no more

[WDS] Disconnected!

You can actually download the openssl.conf linked in the chromium issue, adapt it as needed and use it to generated the key and cert file and finally merge them to the pem...

Following some links that helped getting my head around the issue:

• https://stackoverflow.com/questions/21488845/how-can-i-generate-a-self-signed-certificate-with-subjectaltname-using-openssl
• https://stackoverflow.com/questions/10175812/how-to-create-a-self-signed-certificate-with-openssl/27931596#27931596
• https://superuser.com/questions/1202498/create-self-signed-certificate-with-subjectaltname-to-fix-missing-subjectaltnam/1202506#1202506
• https://stackoverflow.com/questions/21297139/how-do-you-sign-certificate-signing-request-with-your-certification-authority/21340898#21340898
• https://superuser.com/questions/1202498/create-self-signed-certificate-with-subjectaltname-to-fix-missing-subjectaltnam/1202506#1202506

[JamiesWhiteShirt]

I don't know if I am experiencing the issue with subjectAltName, but I am experiencing the same symptoms in Chrome 59.0.3071.115. There seems to be a weird workaround, which is to switch to another tab before the page starts refreshing, and switching back after it's done refreshing (when the favicon is no longer a loading icon).

[shellscape]

Since this was asked before we started enforcing the issue template question notice...

Please ask questions on StackOverflow or the webpack Gitter (https://gitter.im/webpack/webpack). Questions will be closed.

... we let this stay up here for discussion. However, we're going to close due to inactivity. Please do try StackOverflow or the Webpack Gitter.