CODEWITHSUNDEEP
javascriptnode.jsreactjs
meji
meji

Reputation: 1091

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

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

}

Upvotes: 57

Views: 107942

Answers (13)

rinogo
rinogo

Reputation: 9163

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

Upvotes: 4

M Sajid Mansoori
M Sajid Mansoori

Reputation: 1

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.

Upvotes: 0

HyperActive
HyperActive

Reputation: 1328

I fixed it like this:

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

Upvotes: 0

Bence Szalai
Bence Szalai

Reputation: 922

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

Upvotes: 5

dipenparmar12
dipenparmar12

Reputation: 3485

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

}

Upvotes: 0

Luca Fagioli
Luca Fagioli

Reputation: 13359

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.

Upvotes: 1

Arlei F. Farnetani Junior
Arlei F. Farnetani Junior

Reputation: 161

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

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

Upvotes: 10

Rahul Gul
Rahul Gul

Reputation: 582

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.

Upvotes: 0

k1r8r0wn
k1r8r0wn

Reputation: 800

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
}

Upvotes: 0

max ivaneychyk
max ivaneychyk

Reputation: 158

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>

Upvotes: -2

Yuqiu G.
Yuqiu G.

Reputation: 345

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

Upvotes: -1

VvV
VvV

Reputation: 1588

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

Upvotes: 14

Paras Dahal
Paras Dahal

Reputation: 685

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

Upvotes: 3

Related Questions