Error: Invalid WebSocket frame: RSV1 must be clear in Vue.js application with webpack-dev-server

[SimonVriesema]

Bug Report

Actual Behavior

I'm encountering a "Invalid WebSocket frame: RSV1 must be clear" error when running my Vue.js application. The application runs both locally and on the network.

node:events:495
throw er; // Unhandled 'error' event
^

RangeError: Invalid WebSocket frame: RSV1 must be clear
at Receiver.getInfo (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:199:14)
at Receiver.startLoop (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:146:22)
at Receiver._write (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/receiver.js:84:10)
at writeOrBuffer (node:internal/streams/writable:392:12)
at _write (node:internal/streams/writable:333:10)
at Writable.write (node:internal/streams/writable:337:10)
at Socket.socketOnData (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/websocket.js:1278:35)
at Socket.emit (node:events:517:28)
at addChunk (node:internal/streams/readable:335:12)
at readableAddChunk (node:internal/streams/readable:308:9)
at Readable.push (node:internal/streams/readable:245:10)
at TCP.onStreamRead (node:internal/stream_base_commons:190:23)
Emitted 'error' event on WebSocket instance at:
at Receiver.receiverOnError (/Users/simon_vriesema/IdeaProjects/TaskEaseWebApp/node_modules/ws/lib/websocket.js:1164:13)
at Receiver.emit (node:events:517:28)
at emitErrorNT (node:internal/streams/destroy:151:8)
at emitErrorCloseNT (node:internal/streams/destroy:116:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'WS_ERR_UNEXPECTED_RSV_1',
  [Symbol(status-code)]: 1002
}

Expected Behavior

I expected my Vue.js application to run without any WebSocket-related errors.

How Do We Reproduce?

I'm unsure about the exact steps to reproduce the issue, as it appears to be related to WebSocket technology used by my project's dependencies and potentially in webpack-dev-server. I rely on various dependencies, including Vue.js and Webpack, which might be using WebSocket technology internally.

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1 Pro
Memory: 74.67 MB / 16.00 GB
Shell: 5.9 - /bin/zsh

Browsers:
Safari: 17.0

Packages:
webpack-dev-server: ^4.15.1 => 4.15.1

Suggested Code Change

Suggested code change in node_modules/webpack-dev-server/lib/servers/WebsocketServer.js:

--- a/node_modules/webpack-dev-server/lib/servers/WebsocketServer.js
+++ b/node_modules/webpack-dev-server/lib/servers/WebsocketServer.js
@@ -1,4 +1,4 @@
 module.exports = class WebsocketServer extends BaseServer {
     // ... (other code)
 
     this.implementation.on(
       "connection",
       (client) => {
         // ... (other code)
 
         client.on("close", () => {
           this.clients.splice(this.clients.indexOf(client), 1);
         });
 
+        client.on("error", (err) => {
+          this.server.logger.error(err.message);
+        });
       }
     );
 
     // ... (other code)
 }

[yehudiduhey]

Facing the same issue with webpack-dev-server and react

[Tburrington]

^Also observing this with webpack-dev-server and react

[alexander-akait]

@snitin315 Let's fix this in our master branch, also let's do it for version-4 (feel free to create it)

[DaCao]

Also observing this with webpack-dev-server and react:

Compiled successfully!

You can now view dolphin in the browser.

  Local:            http://localhost:80
  On Your Network:  http://192.168.1.29:80

Note that the development build is not optimized.
To create a production build, use yarn build.

webpack compiled successfully
node:events:491
      throw er; // Unhandled 'error' event
      ^

RangeError: Invalid WebSocket frame: RSV1 must be clear
    at Receiver.getInfo (/Users/my-react-app/node_modules/ws/lib/receiver.js:218:14)
    at Receiver.startLoop (/Users/my-react-app/node_modules/ws/lib/receiver.js:155:22)
    at Receiver._write (/Users/my-react-app/node_modules/ws/lib/receiver.js:93:10)
    at writeOrBuffer (node:internal/streams/writable:391:12)
    at _write (node:internal/streams/writable:332:10)
    at Receiver.Writable.write (node:internal/streams/writable:336:10)
    at Socket.socketOnData (/Users/my-react-app/node_modules/ws/lib/websocket.js:1286:35)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
Emitted 'error' event on WebSocket instance at:
    at Receiver.receiverOnError (/Users/my-react-app/node_modules/ws/lib/websocket.js:1172:13)
    at Receiver.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'WS_ERR_UNEXPECTED_RSV_1',
  [Symbol(status-code)]: 1002
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

and

webpack compiled with 1 warning
node:events:495
      throw er; // Unhandled 'error' event
      ^

RangeError: Invalid WebSocket frame: RSV1 must be clear
    at Receiver.getInfo (/Users/my-react-app/node_modules/ws/lib/receiver.js:218:14)
    at Receiver.startLoop (/Users/my-react-app/node_modules/ws/lib/receiver.js:155:22)
    at Receiver._write (/Users/my-react-app/node_modules/ws/lib/receiver.js:93:10)
    at writeOrBuffer (node:internal/streams/writable:392:12)
    at _write (node:internal/streams/writable:333:10)
    at Writable.write (node:internal/streams/writable:337:10)
    at Socket.socketOnData (/Users/my-react-app/node_modules/ws/lib/websocket.js:1286:35)
    at Socket.emit (node:events:517:28)
    at addChunk (node:internal/streams/readable:368:12)
    at readableAddChunk (node:internal/streams/readable:341:9)
    at Readable.push (node:internal/streams/readable:278:10)
    at TCP.onStreamRead (node:internal/stream_base_commons:190:23)
Emitted 'error' event on WebSocket instance at:
    at Receiver.receiverOnError (/Users/my-react-app/node_modules/ws/lib/websocket.js:1172:13)
    at Receiver.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'WS_ERR_UNEXPECTED_RSV_1',
  [Symbol(status-code)]: 1002
}

Node.js v18.19.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.