Webpack-dev-server: [WDS] disconnected! constantly appear on windows 8

[sdhhqb]

One of our team member's system is win8, when he run webpack-dev-server everything seems worked. But every few seconds a [WDS] disconnected! error shows in console and page then refresh.

In the meantime, this issue don't appear on win7.

I had tried ways mentioned in #326, still can't solve the problem.

Here is our webpack.config.js

var webpack = require("webpack");
var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
    entry: {
        "vendor1": ["react", "react-dom", "react-router", "react-router-redux", "react-redux", "redux"],
        "vendor2": ["crypto-js", "fastclick"],
        "app": "./js/index.js"
    },

    output: {
        path: './build/',
        filename: 'js/[name].js',
        publicPath: '/build/',
        chunkFilename: "js/[id].bundle.js"
    },

    module: {
        loaders: [
            {
                test: /\.js$/, 
                include: [
                    path.resolve(__dirname, "js")
                ],
                exclude: [
                    path.resolve(__dirname, "build"),
                    path.resolve(__dirname, "node_modules")
                ],
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['transform-object-assign']
                }
            },

            {
                test: /\.css$/,
                loaders: ["style", "css?-minimize"]
            },

            {
        test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url?limit=512&&name=[path][name].[ext]?[hash]'
      }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor2","vendor1"],
          minChunks: Infinity
        })
    ],

    resolve: {
        modulesDirectories: [
      'node_modules'
    ]
    }
};
module.exports = config;

[sdhhqb]

Turns out the problem is related to chrome version, after update chrome to latest version this issue no longer appear.

[SpaceK33z]

@sdhhqb, weird. It wouldn't make sense to backport a fix for this I think, so can this be closed?

[sdhhqb]

Sure, it's not worth to solve it.

[ghost]

I have the same issue on Mac with the newest (stable) Chrome and Safari.

{
    "webpack": "2.1.0-beta.20",
    "webpack-dev-server": "2.1.0-beta.0",
}

config:

module.exports = env => {
  return {
    devtool: env.prod ? 'source-map' : 'eval',
    entry: [
      'webpack-dev-server/client?http://localhost:3000/',
      'webpack/hot/only-dev-server',
      './src/index',
    ],
    output: {
      filename: 'bundle.js',
      path: resolve(__dirname, 'build'),
      pathinfo: !env.prod,
    },
    bail: env.prod,
    plugins: [
      new HtmlWebpackPlugin({
        title: 'TravelDesk',
        template: 'template.html',
      }),
    ],
    module: {
      loaders: [{
        test: /\.jsx?$/,
        loaders: ['babel'],
        include: resolve(__dirname, 'src'),
      }],
    },
  }
}

[superddr]

I have the same issue with latest chrome on win7

[SpaceK33z]

@MoeSattler and @superddr, are you using the dev-server via CLI?

Note that in dev-server 2.0 beta, the CLI enables inline mode by default. So if you're manually including the webpack-dev-server/client module, the module is loaded two times. Either use the cli with --no-inline, or remove the module from your entry.

[Yerkon]

The same problem with latest Firefox Developer Edition 51.0a2. Works fine on Chrome

Details image

[Yerkon]

https://bugzilla.mozilla.org/show_bug.cgi?id=712329#c23

[samsch]

I'm also getting this issue in one of my projects. For me, the message is (re-)displayed about every 1.2 seconds, with a page refresh. The page loads the https://localhost:8082/sockjs-node/info?t=xxxxxxxxxxxx and a what appears to the be web socket connection request before immediately refreshing.

The problem occurs in Firefox (v52, x64, Xubuntu 15.10), and not in Chrome (56.0.2924.87 x64). [email protected], [email protected]. Also running latest sass/css/style loaders, extract-text-plugin, babel-loader.

For a weird bit, this same config works fine (in Firefox) when the entrypoint isn't my main project. I have three secondary entry points which are compiled with a config file that imports the main one and changes the entry. (Actually, both the main project and secondary configs work like that -- import the main config and set the entry option). The main project uses a few more packages, but I tested requiring each of those in one of the secondary entries, and that didn't reproduce the issue, so it's not as simple as that.

Is it possible that the project size could be affecting this? My main project compile is much larger, and takes significantly longer to compile.

In my main project, I also tried putting a throw new Error(); before any other code. This didn't seem to stop the problem. I'm wondering if maybe there is a hanging WS handler which is catching something before the refresh is done.

Since I have known bad and good configuration, I'm willing to test any ideas which could lead to the cause and solution for this issue. I'm very regularly in #react.js on freenode for faster communication.

UPDATE

I figured out how to reproduce in the my other config. My main project doesn't run on the / web path, it runs in a (virtual) path. It looks like not running from the root triggers the problem. I'm going to see if I can make a minimal reproduction with this info.

[samsch]

Ok, I managed to build a minimal test case.

It's important to have a slow server delaying the page load. I'm guessing the issue is a timeout or a web socket message sent right before the page loads/reloads. I'm also guessing that the reason a test case has been hard to recreate is because it's not normal to intentionally slow things down. I picked up on it because I have a project with a backend which is sluggish (at best) on my local dev machine.

The subdirectory bit in my update to the previous comment doesn't seem to be related at all. I think that was just a coincidence. The problem reproduces fine at the root path.

[SpaceK33z]

@samsch thanks, I can reproduce this now using Firefox on Mac. Chrome works fine as you said. I don't know yet where this issue is coming from, so help would be welcome.

Some things to know; we use http-proxy-middleware for proxying, there could perhaps be a timeout in there. I checked if it could be caused by the HTTP/2 implementation we're using (which is used when https is enabled), but it was not.

[samsch]

http-proxy-middleware exposes a proxyTimeout option from the underlying node-http-proxy, however, it defaults to not being enabled, and a grep search in this module and webpack-dev-middleware doesn't reveal it being set anywhere.

[samsch]

I'm really just scratching at the surface, since I have no prior familiarity with the webpack-dev-server internals.

In client/socket.js, there is a re-connect which takes 1000-1100ms. Could the problem be that the connection is closed on webpack rebuild, the page starts to refresh (causing a connection close, and the [WDS] Disconnected! message), but the timeout fires before the page fully refreshes. Since webpack-dev-server is otherwise idle, the reconnection succeeds, maybe firing reloadApp() in client/index.js?

If this is the problem, then maybe there needs to be onbeforeunload handler which cancels or blocks the timeout?

[adamwallace]

I'm dealing with the same thing. I noticed that the webpack-dev-server version is different from the one I have listed in my package.json. Any chance that could be part of the problem? EDIT: I'm on windows 10 with the latest version of chrome, version 2.2.1 of webpack @samsch

[samsch]

For the fun of it, I tested using version 2.2.0 (original stable v2 release), and it also fails. I don't know if this applies to the v1 branch of the module or not. @adamwallace what version are you using?

[SpaceK33z]

Can anyone help test #841?

[zba]

still have same issue,

"webpack-dev-server": "^2.4.5",
"webpack": "^2.4.1",
"chromium": "57.0.2987.98",
"OS": "Linux"

[samsch]

I failed to reproduce using these versions in my test case:

webpack-dev-server: "2.4.5",
webpack: "2.4.1",
Google Chrome: "57.0.2987.133",
OS: "Xubuntu 17.04"

@zba Can you get a minimal test-case failing? You can fork from my old one if you want.

[ocollins]

Hello,
My team and I are very new to Angular2 and this WDS Disconnected is pretty bad for all of us. We are on Windows 7. Is there a good solution? Any help will be appreciated.
Thank you very much!

[samsch]

@ocollins Can you reproduce the problem in a test case with latest? This problem should be fixed in >=2.4.5.

[Sozialarchiv]

I can confirm this problem:

webpack-dev-server: "2.7.1",
webpack: "3.5.1",
Firfox : "55",
OS: "Windows 7"

[samsch]

The pull which fixed this issue originally shouldn't fail for even longer server delays, and running my test case with updated versions doesn't fail (in linux). I don't have immediate access to Windows or a Mac to test on right now.

@ocollins @Sozialarchiv @goodmorninggoaway We need a testcase which fails to diagnose the issue. Feel free to fork from my repo for the test (you will need to update the versions).

Versions I tested with:

webpack-dev-server: "2.7.1",
webpack: "3.5.3",
Firefox: "54.0",
Xubuntu: "16.10"

[xxxfuwei]

I have same problem
"webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0"
My chrome is 67.0.3396.99（32 ）

[DirtySoc]

Issue persists in Firefox. See minimal test case here.

OS: Windows 10
Browser: Firefox Dev 66.0b14

_"dependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.6.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}_

[alexander-akait]

@DirtySoc Can't reproduce in Firefox and Chrome (linux and windows), looks bug in Firefox with websockets, please use stable version of Firefox

[lauraferrandof]

I'm getting this issue in Firefox, both Developer and regular editions.

OS: Windows 10
Browser: Firefox 88.0 (64-bit) and Firefox Developer Edition 89.0b4 (64-bit)

My list of dependencies:

"dependencies": {
      "@apollo/client": "^3.3.15",
      "@babel/runtime": "^7.13.16",
      "@googlemaps/js-api-loader": "^1.11.3",
      "graphql": "^15.5.0",
      "prop-types": "^15.7.2",
      "react": "^17.0.2",
      "react-dom": "^17.0.2"
},
"devDependencies": {
      "@babel/core": "^7.13.15",
      "@babel/eslint-parser": "^7.13.14",
      "@babel/plugin-transform-runtime": "^7.13.15",
      "@babel/preset-env": "^7.13.15",
      "@babel/preset-react": "^7.13.13",
      "babel-loader": "^8.2.2",
      "css-loader": "^5.2.2",
      "css-minimizer-webpack-plugin": "^2.0.0",
      "dotenv": "^8.2.0",
      "eslint": "^7.24.0",
      "eslint-config-airbnb": "^18.2.1",
      "eslint-config-prettier": "^8.2.0",
      "eslint-plugin-import": "^2.22.1",
      "eslint-plugin-jsx-a11y": "^6.4.1",
      "eslint-plugin-prettier": "^3.4.0",
      "eslint-plugin-react": "^7.23.2",
      "eslint-plugin-react-hooks": "^4.2.0",
      "file-loader": "^6.2.0",
      "html-webpack-plugin": "^5.3.1",
      "mini-css-extract-plugin": "^1.5.0",
      "prettier": "^2.2.1",
      "sass": "^1.32.11",
      "sass-loader": "^11.0.1",
      "style-loader": "^2.0.0",
      "stylelint": "^13.12.0",
      "stylelint-config-standard": "^21.0.0",
      "stylelint-order": "^4.1.0",
      "stylelint-scss": "^3.19.0",
      "svg-sprite-loader": "^6.0.6",
      "webpack": "^5.33.2",
      "webpack-cli": "^4.6.0",
      "webpack-dev-server": "4.0.0-beta.2",
      "webpack-merge": "^5.7.3"
}

My webpack config for development:

const path = require('path');
const dotenv = require('dotenv');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

const envVariables = dotenv.config().parsed;

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, './dist'),
        clean: true
    },
    mode: 'development',
        devtool: 'inline-source-map',
        devServer: {
            static: [path.resolve(__dirname, './dist')],
            port: 3000
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            {
                test: /\.sass$/i,
                exclude: /(node_modules)/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.svg$/,
                include: path.resolve(__dirname, './src/assets/images/sprite'),
                loader: 'svg-sprite-loader',
                options: {
                    extract: true,
                    spriteFileName: './assets/images/sprite.svg'
                }
            },
            {
                test: /\.svg$/,
                include: path.resolve(__dirname, './src/assets/images'),
                exclude: path.resolve(__dirname, './src/assets/images/sprite'),
                loader: 'file-loader',
                options: {
                    name: 'assets/images/[name].[ext]'
                }
            },
            {
                test: /\.(woff|woff2)$/,
                include: path.resolve(__dirname, './src/assets/fonts'),
                loader: 'file-loader',
                options: {
                    name: 'assets/fonts/[name].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html')
        }),
        new SpriteLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env.API_KEY': JSON.stringify(envVariables.API_KEY),
            'process.env.API_URL': JSON.stringify(envVariables.API_URL)
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};