How to resolve error: "[WDS] Disconnected!"

Question

I'm currently getting started on ReactJs. However, I've come across the following error in the console which doers not show in the terminal:

[WDS] Disconnected!sock.onclose @ client?64c0:70EventTarget.dispatchEvent @ eventtarget.js:49(anonymous function) @ main.js:356

abstract-xhr.js:128 GET http://127.0.0.0/sockjs-node/info?t=1461853324372 net::ERR_CONNECTION_TIMED_OUT

It's looking for "sockjs-node" which I've installed locally and globally, however no change. Shouldn't it be searching the "node_modules" folder?

Here is my configuration:

var webpack = require("webpack");
var path = require("path");


module.exports = {
    
    devtool: "inline-source-map",
    entry: [
        "webpack-dev-server/client?http://127.0.0.0/",
        "webpack/hot/only-dev-server",
        "./src"
    ],
    devServer: {
        contentBase: "./public",
        hot: true,    
        inline: true,
        quiet: false,
        noInfo: true,
        stats: { colors: true }
    },
    output: {
        path: path.join(__dirname, "./public"),
        filename: "./assets/js/bundle.js"
    },
    resolve: {
        modulesDirectrories: ["node_modules", "src"],
        extentions: ["", ".js"]
    },
    module : {
        loaders: [
            { 
                test: /\.jsx?$/,
                exclude: "/node_modules/",
                loaders: ["react-hot-loader", "babel?presets[]=react,presets[]=es2015"] 
            }, 
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }, 
            {
                test: /\.gif$/,
                loader: "url-loader?mimetype=image/png"
            }, 
            {
                test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "url-loader?mimetype=application/font-woff"
            }, 
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "file-loader?name=[name].[ext]"
            }
        ]
    },
    plugins: [ 
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("development")
            }
        })
    ]

}

Your app is running on port 8080, but you're HMR is listening on port 80. Try this: `"webpack-dev-server/client?http://127.0.0.0:8080/"` — lux, Apr 28 '16 at 17:49
Thanks lux... now its getting the socket module. However still displays "[WDS] Disconnected!" — meji, Apr 28 '16 at 20:01
Hm, my entry looks identical except I use localhost and not the local IP: `entry = [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/bootstrap' ]` — lux, Apr 28 '16 at 20:26
My simple react boilerplate: https://github.com/mikechabot/react-boilerplate `npm install` -> `npm start` — lux, Apr 28 '16 at 20:27

score 14 · Answer 1 · edited Aug 23 '16 at 05:39

14

I fixed it like this;

as-is :

  entry: [
    "webpack-dev-server/client?http://localhost:9090",
    "webpack/hot/only-dev-server",
    "./src/app"
  ],

to-be :

  entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080",
    "webpack/hot/only-dev-server",
    "./src"
  ],

edited Aug 23 '16 at 05:39

Alex L

8,748
5
49
75

answered Aug 23 '16 at 03:58

VvV

1,548
12
18

The to-be part has a different port number, but for me the problem was solved just by replacing localhost with IP address. – Michael Domashchenko Apr 11 '17 at 13:10

score 9 · Answer 2 · answered Dec 23 '18 at 22:38

9

To me, solved when I created a file: vue.config.js in root project with content below:

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

answered Dec 23 '18 at 22:38

Arlei F. Farnetani Junior

121
1
4

4

From the [docs](https://webpack.js.org/configuration/dev-server/#devserver-disablehostcheck): "THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks." – Luca Fagioli Jan 03 '19 at 11:37

score 4 · Answer 3 · answered Sep 01 '20 at 23:21

I was getting the same kind of error, because my Webpack was configured to serve at localhost:3000, but I had a local port redirection in place from 80 to 3000, and I was accessing the dev application using http://localhost/. But in Network inspector I've noticed that WDS was still querying http://localhost:3000/sockjs-node/info?... which was timing out.

Solution is to tell Webpack the "public" address of your app, in my case was like this:

devServer: {
      https: false,
      port: 3000,
      public: 'http://localhost:80'
    }

(Note: the :80 part of the public is optional, since 80 is the default, but added to make it clear, that 3000 is the port being served and 80 is the port being redirected to it.)

(Don't ask why I simply not use port: 80 instead, it's complicated. But I hope my answer will help someone like me one day.)

score 3 · Answer 4 · answered Jul 12 '16 at 08:17

3

The problem seems to be that you have not included the port number in url webpack-dev-server/client?http://127.0.0.0/

Change This

entry: [
    "webpack-dev-server/client?http://127.0.0.0/",
    "webpack/hot/only-dev-server",
    "./src"
],

To:

entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080/",
    "webpack/hot/only-dev-server",
    "./src"
],

answered Jul 12 '16 at 08:17

Paras Dahal

675
7
12

This answer worked for me https://stackoverflow.com/a/53631238/5403449 – Josh May 28 '21 at 17:46

rinogo · Answer 5 · 2023-03-21T20:11:21.527

3

2022 update

As mentioned by others, this is an issue with webpack-dev-server. The problem is likely a host or port mismatch in your environment.

The solution is simple - update your Webpack config (e.g. webpack.config.js) to allow all hosts:

devServer: {
  ...
  allowedHosts: ['all'],
  ...
},

As this disables important security protections, do not use this setting in production (More info).

edited Mar 21 '23 at 20:11

answered Feb 14 '22 at 23:59

rinogo

8,491
12
61
102

1

Maybe that bold sentence isn't quite right ;) – Torque Mar 21 '23 at 19:21

score 1 · Answer 6 · answered Jan 03 '19 at 15:27

1

In our case the issue was due to a mismatch between the host name that webpack-dev-server was using to serve the asset, and the host name the application was running from.

Specifically, our local application was running from https://dev.resumize.me, but webpack-dev-server was serving the asset from 127.0.0.1.

You can control the host name used by webpack-dev-server with the option --host. So in our case, we had to launch it with:

webpack-dev-server.js --host dev.resumize.me --https

Hope this helps.

answered Jan 03 '19 at 15:27

Luca Fagioli

12,722
5
59
57

Thanks! I was running my site through ngrok (a tunnel service). Knowing the --host option helps. But can I specify multiple hosts (e.g. localhost AND mytunnel.ngrok.com)? – morgler Nov 14 '20 at 15:23
1

@morgler I am afraid you cannot specify multiple hosts. – Luca Fagioli Dec 19 '20 at 13:49

k1r8r0wn · Answer 7 · 2018-02-01T07:38:22.437

0

In development.js file try to use the following settings for dev_server:

dev_server: {
    host: '127.0.0.0'
    port: 8080
    https: false
    disableHostCheck: true
}

edited Feb 01 '18 at 07:38

answered Feb 01 '18 at 07:06

k1r8r0wn

780
9
21

score 0 · Answer 8 · answered Jun 18 '18 at 09:00

I am using angular and I use the webpack server as a dev-dependency. I was looking for an answer and couldn't find a suitable one for me.

Note: This is just a workaround and not a fix for the actual problem

open the following file

YOUR_PROJECT_ROOT\node_modules\webpack-dev-server\client\index.js

in the method onSocketMsg , under the function ok() comment the line reloadApp().

This prevents the app from reloading continuously. This stops the application from reloading even if you make your changes. But you can always reload your browser manually and your changes would reflect.

score 0 · Answer 9 · edited Jun 20 '20 at 09:12

This will be solved by Enabling Error Overlay,

overlay:true include one more property in devServer object

devServer: {
    overlay: true,
    contentBase: "./public",
    hot: true,    
    inline: true,
    quiet: false,
    noInfo: true,
    stats: { colors: true }
}

after change your webpack.config.js

var webpack = require("webpack");
var path = require("path");


module.exports = {

    devtool: "inline-source-map",
    entry: [
        "webpack-dev-server/client?http://127.0.0.0/",
        "webpack/hot/only-dev-server",
        "./src"
    ],
    devServer: {
        overlay: true,
        contentBase: "./public",
        hot: true,    
        inline: true,
        quiet: false,
        noInfo: true,
        stats: { colors: true }
    },
    output: {
        path: path.join(__dirname, "./public"),
        filename: "./assets/js/bundle.js"
    },
    resolve: {
        modulesDirectrories: ["node_modules", "src"],
        extentions: ["", ".js"]
    },
    module : {
        loaders: [
            { 
                test: /\.jsx?$/,
                exclude: "/node_modules/",
                loaders: ["react-hot-loader", "babel?presets[]=react,presets[]=es2015"] 
            }, 
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }, 
            {
                test: /\.gif$/,
                loader: "url-loader?mimetype=image/png"
            }, 
            {
                test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "url-loader?mimetype=application/font-woff"
            }, 
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "file-loader?name=[name].[ext]"
            }
        ]
    },
    plugins: [ 
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("development")
            }
        })
    ]

}

score 0 · Answer 10 · edited May 10 '21 at 18:06

In the webpack config file : Modify devServer and add:

{ 
  disableHostCheck: true,
  transportMode: 'ws',
  injectClient: false
}

like the following and it should work :

devServer: {
  contentBase: "./public",
  hot: true,    
  inline: true,
  quiet: false,
  noInfo: true,
  stats: { colors: true }
  disableHostCheck: true,
  transportMode: 'ws',
  injectClient: false
}

It worked for me.

score 0 · Answer 11 · answered May 03 '21 at 17:53

0

I fixed it like this:

  devServer: {
    host: '0.0.0.0',
    https: false,
    port: 8080,
    public: 'http://0.0.0.0:8080'
  },

answered May 03 '21 at 17:53

HyperActive

1,129
12
12

score -1 · Answer 12 · edited Jul 28 '17 at 08:01

-1

You don't need to change webpack.config.js

Try fixing in package.json (start server on port 3000 instead of standard 8080):

"start": "./node_modules/.bin/webpack-dev-server --host localhost --port 3000 --content-base src --inline --hot",

edited Jul 28 '17 at 08:01

MD Ashik

9,117
10
52
59

answered May 04 '17 at 22:24

Yuqiu G.

348
4
7

1

This didn't work for me. Could you explain why it should make a difference? – aioobe Nov 20 '17 at 18:16

score -2 · Answer 13 · answered Oct 20 '17 at 19:20

-2

in index.htm change path:

   <link rel="stylesheet" href="./main.css">
   <script src="./main.js"></script>

to

   <link rel="stylesheet" href="/main.css">
   <script src="/main.js"></script>

answered Oct 20 '17 at 19:20

max ivaneychyk

148
3

This answer is downvoted because it is an answer that would only work for you and your current setup. It does not explain the WDS disconnect issue or how it can be fixed. – Gabriel Fair Mar 23 '20 at 02:41

How to resolve error: "[WDS] Disconnected!"

13 Answers13

2022 update

This will be solved by Enabling Error Overlay,

Linked