Webpack-dev-server: WebSocket connection failure when port is 8080

Created on 18 Jul 2019 · 11Comments · Source: webpack/webpack-dev-server

Operating System: macOS 10.14.5
Node Version: 11.14.0
NPM Version: 6.7.0
yarn Version: 1.17.3
webpack Version: 4.36.1
webpack-dev-server Version: 3.7.2
Browser: Google Chrome 75.0.3770.142 (Official Build) (64-bit)

[x] This is a bug
[ ] This is a modification request

Code

Minimal repo to reproduce: cjolowicz/webpack-dev-server-2134

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: "./dist"
  }
};

<!-- dist/index.html -->
<!doctype html>
<html>

<head>
    <title>Getting Started</title>
</head>

<body>
    <script src="main.js"></script>
</body>

</html>

// src/index.js
function component() {
  const element = document.createElement("div");

  element.innerHTML = "Hello webpack";

  return element;
}

document.body.appendChild(component());

Expected Behavior

No errors and warnings are displayed in console.

Actual Behavior

The console shows a warning about a WebSocket connection failure:

⚠️ WebSocket connection to 'ws://localhost:8080/sockjs-node/567/tzakkbmw/websocket' failed: WebSocket is closed before the connection is established. (sockjs.js:2998)

Backtrace

WebSocketTransport.close @ sockjs.js:2998
SockJS._transportTimeout @ sockjs.js:843
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._receiveInfo @ sockjs.js:802
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1597
XMLHttpRequest.send (async)
(anonymous) @ VM16:1
AbstractXHRObject._start @ sockjs.js:1605
(anonymous) @ sockjs.js:1494
setTimeout (async)
AbstractXHRObject @ sockjs.js:1493
XHRLocalObject @ sockjs.js:2914
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:536
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
SockJSClient @ SockJSClient.js:39
initSocket @ socket.js:20
(anonymous) @ client:176
(anonymous) @ client:177
./node_modules/webpack-dev-server/client/index.js?http://localhost @ main.js:306
__webpack_require__ @ main.js:20
(anonymous) @ client:1
0 @ main.js:467
__webpack_require__ @ main.js:20
(anonymous) @ main.js:84
(anonymous) @ main.js:87

After a few seconds, the console shows an error about webpack-dev-server having disconnected:

❌[WDS] Disconnected! (client:172)

Backtrace

close @ client:172
(anonymous) @ socket.js:26
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:969
setTimeout (async)
SockJS._close @ sockjs.js:957
SockJS._connect @ sockjs.js:836
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._transportClose @ sockjs.js:912
SockJS._transportTimeout @ sockjs.js:846
setTimeout (async)
SockJS._connect @ sockjs.js:822
SockJS._receiveInfo @ sockjs.js:802
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1597
XMLHttpRequest.send (async)
(anonymous) @ VM16:1
AbstractXHRObject._start @ sockjs.js:1605
(anonymous) @ sockjs.js:1494
setTimeout (async)
AbstractXHRObject @ sockjs.js:1493
XHRLocalObject @ sockjs.js:2914
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:536
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
setTimeout (async)
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
SockJSClient @ SockJSClient.js:39
initSocket @ socket.js:20
(anonymous) @ client:176
(anonymous) @ client:177
./node_modules/webpack-dev-server/client/index.js?http://localhost @ main.js:306
__webpack_require__ @ main.js:20
(anonymous) @ client:1
0 @ main.js:467
__webpack_require__ @ main.js:20
(anonymous) @ main.js:84
(anonymous) @ main.js:87

After some further delay, there may be additional errors:

❌Uncaught TypeError: _jp.anld3sq is not a function (jsonp?c=_jp.anld3sq:1)

Backtrace

    at jsonp?c=_jp.anld3sq:1
(anonymous) @ jsonp?c=_jp.anld3sq:1

❌Invalid Host/Origin header (client:169)

Eventually, the informational message appears:

[WDS] Live Reloading enabled. (client:52)

How can we reproduce the behavior?

Clone cjolowicz/webpack-dev-server-2134
yarn run webpack-dev-server --mode development
Open Google Chrome at http://localhost:8080/
View JavaScript Console

Update

This problem does not occur when a port other than 8080 is configured:

// webpack.config.js
module.exports = {
  devServer: {
    port: 8081,
    contentBase: "./dist"
  }
};

On the other hand, this problem _does_ occur if the default port 8080 is explicitly set in the webpack configuration file.

Source

cjolowicz

👍1

Most helpful comment

@ajaybhargavb this could be caused by a recent Chrome update. I'm also getting similarly cryptic error messages in Chrome, but Firefox is fine. I'm using Chrome 79.0.3945.117.

steve-taylor on 14 Jan 2020

👍5

All 11 comments

Thank you for the reporting. I'll take a look.

hiroppy on 18 Jul 2019

I cannot reproduce this issue. Please check your local setting.

hiroppy on 19 Jul 2019

Thanks for looking into this!

I checked with some other browsers and indeed they don't have this issue.

Firefox 69.0b6 (64-bit)
Safari Version 12.1.1 (14607.2.6.1.1)

The issue does not seem to be caused by a Chrome extension, as it also appears in Incognito mode.

I'll try to reproduce this on another machine.

There is one mention on SO of a similar problem, without much additional information.

cjolowicz on 19 Jul 2019

I checked using [email protected]. And Its StackOverflow is too old so don't refer it.

4 years, 1 month ago

hiroppy on 19 Jul 2019

The answer mentioning webpack is from August 2018.

cjolowicz on 20 Jul 2019

Closing this. The issue is not reproducible on the other machine (using the same version of Google Chrome). If I ever manage to find out what kind of misconfiguration causes this, I'll leave a comment.

cjolowicz on 1 Aug 2019

IS there any solution to fix this?
sockjs.js:2999 WebSocket connection to 'ws://localhost:3001/sockjs-node/848/dvgm001q/websocket' failed: WebSocket is closed before the connection is established.

RisingStar-Web on 7 Oct 2019

👍4

@DragonWarrior0914 I just restarted Chrome and the problem was gone.

amravazzi on 28 Oct 2019

[Severe] https://localhost:4454/sockjs-node/081/zyz33qod/jsonp?c=_jp.a2jicyo 0:8 Uncaught TypeError: _jp.a2jicyo is not a function
I'm seeing this error frequently but very flaky. Restarting chrome is not an option for me as I'm trying to do this in an automated test.

ajaybhargavb on 21 Nov 2019

@ajaybhargavb this could be caused by a recent Chrome update. I'm also getting similarly cryptic error messages in Chrome, but Firefox is fine. I'm using Chrome 79.0.3945.117.

steve-taylor on 14 Jan 2020

👍5

I think this is due to a caching issue when updating chrome. I updated chrome and this issue appeared. After a system restart (restarting chrome didn't fix it) it disappeared.