'Keep getting [WDS] Disconnected! error
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.
Solution 1:[1]
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"
],
Solution 2:[2]
To me, solved when I created a file: vue.config.js in root project with content below:
module.exports = {
devServer: {
disableHostCheck: true
}
}
Solution 3:[3]
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.)
Solution 4:[4]
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"
],
Solution 5:[5]
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.
Solution 6:[6]
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
}
Solution 7:[7]
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.
Solution 8:[8]
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")
}
})
]
}
Solution 9:[9]
I fixed it like this:
devServer: {
host: '0.0.0.0',
https: false,
port: 8080,
public: 'http://0.0.0.0:8080'
},
Solution 10:[10]
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.
Solution 11:[11]
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, only use this setting in production (More info).
Solution 12:[12]
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",
Solution 13:[13]
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow