Webpack-dev-server: 1.13.0 [WS] Disconnected, net::ERR_CONNECTION_REFUSED

[laszlokorte]

For versions greater than 1.12.1 The WebSocket connection seems to be broken.

In the console I get the errors:

GET http://localhost/info?t=1448470960512 net::ERR_CONNECTION_REFUSED
[WDS] Disconnected!

My Webpack Config looks like this:

{
//....
plugins: [
    new webpack.HotModuleReplacementPlugin(),
],
devServer: {
    contentBase: "./app/static",
    port: 3000,

    inline: true,
    historyApiFallback: true,

    colors: true,
    stats: 'normal',
},
}

As you can see the port is set to 3000 and I also access the page via http://localhost:3000/ but the WebSocket connections seems to ignore the port and tries to connect to http://localhost/info

I am new to webpack so I am not quite sure if I am doing something wrong but as it was working a few days ago and also works if I downgrade to 1.12.1 I suppose it's an error with webpack-dev-server.

[madjam002]

+1 I'm getting this issue too, 1.12.1 works fine.

[syranide]

+1 Getting the same problem when going from 1.12.1 to 1.13.0. But I'm using the default port.

EDIT: Ok unrelated it seems, socket.io is now sockjs-node instead.

[laszlokorte]

could be related to this one sockjs/sockjs-client#262

[SpaceK33z]

I probably introduced this bug with PR #302. I am able to reproduce this bug using vagrant, so I'll look into it soon.

[carpeliam]

I'm seeing:

GET http://localhost:8124/sockjs-node/info?t=1448668134012 404 (Not Found)
[WDS] Disconnected!

after upgrading webpack-dev-server from v1.10.1 to v1.14.0. I'm using webpack-dev-server directly in node, via:

// ...
var bundler = new WebpackDevServer(webpack(webpackConfig), {
    publicPath: '/build/',
    inline: true,
    hot: true,
    quiet: false,
    noInfo: true,
    stats: {colors: true}
});

bundler.listen(3001, 'localhost');
// ...

I tried applying the changes in #328, and I'm still seeing the issue.

[SpaceK33z]

@carpeliam, did you run npm run prepublish in the webpack-dev-server module after applying the changes in #328?

[laszlokorte]

applying #328 fixed it for me. Thank you!

(after running npm run prepublish inside ./node_modules/webpack-dev-server/)

[ghost]

+1 on the fix with npm run prepublish. and for those trying to debug this on NPM v3.3.12, don't rely on locked version numbers in package.json (or even npm-shrinkwrap.json, for that matter) to put you back on WDS v0.12.1 if you're trying to downgrade.

[laszlokorte]

When will there be a new release containing the fix for this?

[SpaceK33z]

When @sokra has time for it I think ;).

[carpeliam]

@SpaceK33z finally had a chance to come back to this. Looks like it's working for others which is great, but I'm experiencing the same symptom (server logs say 15.12.18 08:10:16 404 GET /sockjs-node/info (Unknown - 1ms)). I completely reinstalled webpack-dev-server (removed the directory, installed webpack/webpack-dev-server#3d3c000df8889e8b557995e5fe918b29072c377f, and ran npm install && npm run prepublish within the webpack-dev-server directory).

Do I need to include an expicit dependency on sockjs and set up the server myself within my own app?

EDIT: I had webpack-dev-server listening to port 3001, setting up a proxy to my app running on port 8124. The requests to /sockjs-node/info were against my app port (8124), not my webpack-dev-server port (3001). Looks like proxying has changed since the version I was on previously (1.10.1), I'll look into how proxying is supposed to work now.

[savroff]

Get this all the time. Hot reload works, but still get this

I think it's happens when I ugrade Google Chrome browser to v. 47.0.2526.106

[ThomWright]

v1.14.1 was released two days ago with this fix in it which is working for me. Have you upgraded to the latest version? If so, what you're seeing might be a different issue.

[timwingfield]

I just upgraded to v1.14.1 and am still seeing it.

Everything works fine, hot reload and the server, just this is constantly coming up in the console. About every 3 seconds.

[SpaceK33z]

@timwingfield, the url should be /sockjs-node/info. Where does /assets/come from?

[timwingfield]

Good question, from my config I think.

entry: {
    App: [
      'webpack-dev-server/client?http://localhost:8080/assets/',
      'webpack/hot/only-dev-server',
      './client/javascripts/entry'
    ]
  },
  output: {
    path: path.join(__dirname, 'app', 'assets', 'javascripts'),
    filename: '[name]_wp_bundle.js',
    publicPath: 'http://localhost:8080/assets'
  },

[timwingfield]

@SpaceK33z upon more digging, I have a feeling Rails is the culprit here as it's configured to serve the web assets from /assets. Still looking. Thanks for pointing me in a new direction, though.

[timwingfield]

Nope, it was my webpack config.

changing the first line in the App array fixed it.
webpack-dev-server/client?http://localhost:8080/

[savroff]

@timwingfield yes, we use under Rails. I fix it with changing config. Pretty much the same stuff, but I have multiply entries

module.exports = {
  context: __dirname,
  devtool: 'eval',
  entry: {
    'publisher': publisherEntries,
    'manager': managerEntries,
    'client': "webpack-dev-server/client?http://localhost:8080"
  },
  output: {
    path: __dirname + "/public/assets/build/",
    filename: "[name].js",
    publicPath: 'http://localhost:8080/'
  },
  plugins: plugins,
  module: {
    loaders: [
      { test: /\.js$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }
    ]
  }

[timwingfield]

Got it all working now. Thanks @SpaceK33z and @savroff

[liamfd]

@timwingfield I'm having the same issue and attempted your fix. It got rid of the 404s, but, removing the /assets seems to break the actual hot reloading. It's giving me an error and it always refreshes the page. Are you experiencing that?

edit: My apologies, adding the no errors plugin fixed it for me. For posterity:

plugins: [
    new webpack.NoErrorsPlugin()
],

Though this does seem kind of like a band-aid and not an actual fix, I don't know enough about that plugin to really say. It does seem to be working though.

[leedium]

Hey dudes, getting a similar error, but not sure if it's my implementation or a configuration issue. Any help is appreciated.

1) App served on localhost:3002/
2 ) WDS/HMR bundles on localhost:3001
3 ) Proxy set up on localhost:3000 to route html requests to localhost:3002, and js-bundle and websocket /upgrade requests to the WDS/HMR on 3001.

When I build I get the following error:

> [WDS] Disconnected!
sock.onclose @ client?e36c:70EventTarget.dispatchEvent @ eventtarget.js?a091:49(anonymous function) @ main.js?75ae:356
abstract-xhr.js?c9b2:128 
GET http://localhost:3001/sockjs-node/info?t=1454445244870 AbstractXHRObject._start @ abstract-xhr.js?c9b2:128(anonymous function) @ abstract-xhr.js?c9b2:21
app.html:1 
XMLHttpRequest cannot load http://localhost:3001/sockjs-node/info?t=1454445244870. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

I can't understand why this is because I have set this header value to * in the wpDevMiddleware config.
Any help would be appreciated. See configuration below. Not sure if I'm doing this right or if there is a better way

dev-middleware.js

let devMiddlewareOptions = {
        quiet:false,
        noInfo:true,
        hot:true,
        inline:true,
        lazy:false,
        publicPath: 'http://localhost:3001/',
        headers:{
            'Access-Control-Allow-Origin': '*'
        },
        stats:{
            colors:true
        }
    }
devServer.use(webpackDevMiddleware(bundler,devMiddlewareOptions))
devServer.use(webpackHotMiddleWare(bundler));

webpack-config.js

entry:{             
        app:[
             'webpack-dev-server/client?http://localhost:3001',
                 'webpack/hot/dev-server',
                  path.resolve(appPath, '../src/client.js')
                 ],
          },
    plugins:[
        new webpack.ProvidePlugin({riot: 'riot'}),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin({name:"globals" , filename: "build/scripts/globals.bundle.js"}),
    ]

[leedium]

fixed:

webpack-config.js

    entry:{             
            app:[
                 //'webpack-dev-server/client?http://localhost:3001',
                 //'webpack/hot/dev-server',
                'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr',
                  path.resolve(appPath, '../src/client.js')
                 ],

[gertig]

@timwingfield thanks for the tip on where to look!

I had
'webpack-dev-server/client?http://127.0.0.1:' + port
and needed to add a '/'
'webpack-dev-server/client?http://127.0.0.1:' + port + '/'

[sohkai]

@timwingfield Nice one, I was having exactly the same issue! I've updated the dev server wiki to reflect the need for the additional / at the end of the entry point.

[Caldis]

Try to edit urlParts.hostname of sock = new SockJS() in

webpack-dev-server\client\index.js

Before

var newConnection = function() {
    sock = new SockJS(url.format({
        protocol: urlParts.protocol,
        auth: urlParts.auth,
        hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : urlParts.hostname,
        port: urlParts.port,
        pathname: urlParts.path === '/' ? "/sockjs-node" : urlParts.path
    }));

    sock.onclose = function() {
        console.error("[WDS] Disconnected!");

        // Try to reconnect.
        sock = null;
        setTimeout(function () {
            newConnection();
        }, 2000);
    };

    sock.onmessage = function(e) {
        // This assumes that all data sent via the websocket is JSON.
        var msg = JSON.parse(e.data);
        onSocketMsg[msg.type](msg.data);
    };
};

after

var newConnection = function() {
    sock = new SockJS(url.format({
        protocol: urlParts.protocol,
        auth: urlParts.auth,
        hostname: (urlParts.hostname === '0.0.0.0') ? window.location.hostname : '127.0.0.1',
        port: urlParts.port,
        pathname: urlParts.path === '/' ? "/sockjs-node" : urlParts.path
    }));

    sock.onclose = function() {
        console.error("[WDS] Disconnected!");

        // Try to reconnect.
        sock = null;
        setTimeout(function () {
            newConnection();
        }, 2000);
    };

    sock.onmessage = function(e) {
        // This assumes that all data sent via the websocket is JSON.
        var msg = JSON.parse(e.data);
        onSocketMsg[msg.type](msg.data);
    };
};

[dannguyen]

FWIW, @SohKai's fix doesn't seem to work when --content-base is provided as an argument,

e.g. given a project in which the source is in ./src, a package.json script might be configured as:

  "scripts": {
    "start": "webpack-dev-server --hot --inline --content-base src"
   }

[Jaikant]

@leedium's fix worked for me. i.e. using webpack-hot-middleware instead of webpack-dev-server in the config file. But why is the question.

[danghatam]

thanks @leedium, it worked for me.

[jtarantinomastercard]

I have the same issue as @dannguyen. Updated to 1.16 and had to revert to 1.12 because the constant disconnects caused my browser to stall completely for 10 seconds roughly every 30 seconds. Any chance of a fix?

[AlexFrazer]

Did you make sure to use the same port in the devServer.port and webpack-dev-server/client?{url}?

[jtarantinomastercard]

@AlexFrazer yup!

[skesani]

@timwingfield I am using angular-cli, i can't edit webpack config, do you know any other solution for angular-cli users?