Console error: WebSocket connection to 'ws://localhost:53317/socket' failed

[brightpixels]

What version of Remix are you using?

1.3.1

Steps to Reproduce

• Generate a new remix app and npm run dev
• Add these scripts and relevant node packages (concurrently, sass)
  "dev": "concurrently \"npm run dev:generate-css\" \"remix dev\"", "dev:generate-css": "sass --watch ./app/scss:app/css",
• Create a folder at /app/scss
• Start the dev server, go to localhost, and open the console in Chrome's inspector
• Whilst the app is running, create a .scss file under app/scss
• Check the console in Chrome's inspector to see the error and broken livereolad

Expected Behavior

No errors for WebSocket connection to 'ws://localhost:53317/socket' failed to appear when a watched scss file is added, and working live reload

Actual Behavior

Seeing a WebSocket connection to 'ws://localhost:53317/socket' failed in the console, and broken livereload

(index):30 WebSocket connection to 'ws://localhost:53317/socket' failed: 
(anonymous) @ (index):30
(anonymous) @ (index):45
(index):42 Remix dev asset server web socket error:
(index):43 Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}isTrusted: truebubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: WebSocketbinaryType: "blob"bufferedAmount: 0extensions: ""onclose: nullonerror: (error) => {…}onmessage: (message) => {…}onopen: nullprotocol: ""readyState: 3url: "ws://localhost:53317/socket"[[Prototype]]: WebSocketdefaultPrevented: falseeventPhase: 0path: []returnValue: truesrcElement: WebSocketbinaryType: "blob"bufferedAmount: 0extensions: ""onclose: nullonerror: (error) => {…}onmessage: (message) => {…}onopen: nullprotocol: ""readyState: 3url: "ws://localhost:53317/socket"[[Prototype]]: WebSockettarget: WebSocketbinaryType: "blob"bufferedAmount: 0extensions: ""onclose: nullonerror: (error) => {…}onmessage: (message) => {…}onopen: nullprotocol: ""readyState: 3url: "ws://localhost:53317/socket"[[Prototype]]: WebSockettimeStamp: 66.39999997615814type: "error"[[Prototype]]: Event
ws.onerror @ (index):43
error (async)
(anonymous) @ (index):41
(anonymous) @ (index):45

[brightpixels]

I don't see this error anymore in the console. I have disabled many chrome extensions but not sure if this had to do anything with it. @hakimLyon I can see you raised same issue so try disabling all the chrome extensions.

[brightpixels]

I have located where this errors occurs. I have the following npm script

"dev": "concurrently \"npm run dev:generate-css\" \"remix dev\"", "dev:generate-css": "sass --watch ./app/scss:app/css",

The moment I create a new .scss file under the app/scss folder, the error appears.

This error also breaks the live reloading. The only way to work around this to stop the dev server and start it again. Once you do that, the error no longer appears and live reloading works once again.

[hakimLyon]

Exact @brightpixels thx, I will try to disable all chrome extensions and see what happen.
npm script

"dev": "PORT=3001 concurrently \"npm run dev:css\" \"remix dev\""

[tessellator]

I believe this is a duplicate of #2958.

[machour]

Duplicate of #2958

[abn5x]

still happening..

[machour]

@abn5x can you open a new issue ? Comments on closed issues are rarely seen.
Make sure to check the linked issue first for some additional insight