Keep getting [WDS] Disconnected! error

enter image description here

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")
            }
        })
    ]

}

Any help is appreciated, and thanks in advance.

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"
  ],

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

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

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.)

Keep getting [WDS] Disconnected! error

Related

Recent Posts