Solved: On Ubuntu – HMR not working? Latest SAFE Stack (v5.0.4) can’t establish a connection to the server at ws://localhost:8000/socketcluster/ .

[PiotrW3106]

Over the last couple of days I have not been able to figure out why this problem is occurring.

I wanted to try out the Safe Stack template (v5.0.4) on a vanilla Ubuntu 20.04.6 LTS (fully updated) not using any containers (to simplify debugging).

Node v20.5.1
NPM v10.2.5
Vite v5.0.12

I have not changed any configuration settings. i.e. just created a test project from the template, restored the tools and then ran it as per the quick start.
I followed the Quick Start guide as per https://safe-stack.github.io/docs/quickstart/ . Then I ran it as per the quick start and then pointed my browsers at http://localhost:8080/ . The Todo list renders and works i.e. I can add new items.

I have not changed any of the default configuration settings. i.e. just created a test project from the template, restored the tools.

However, it throws errors in the browser, I tried several browsers including Chrome (latest versions), Firefox, etc.

It appears the HMR does not work as the page reloads completely if I make a change in Index.fs.

Googling around does not yield any clues as to why it would be failing on a linux distro.

I tried upgrading the various packages in the package.json e.g. vite to 5.1.1 but I keep getting the same errors:

most relevant errors :

WebSocket connection to 'ws://localhost:8000/socketcluster/' failed: createWebSocket @ remotedev.js?v=4fef5dc4:1095
SCTransport @ remotedev.js?v=4fef5dc4:1122
SCClientSocket.connect.SCClientSocket.open @ remotedev.js?v=4fef5dc4:2132
(anonymous) @ remotedev.js?v=4fef5dc4:2311

excerpts from the start of the errors in Chrome:
[vite] connecting...
client.ts:156 [vite] connected.
prelude.fs:15 Initial state: Model
prelude.fs:15 Updated subs: FSharpList
remotedev.js?v=8fc1d56f:1095 WebSocket connection to 'ws://localhost:8000/socketcluster/' failed:
createWebSocket @ remotedev.js?v=8fc1d56f:1095
remotedev.js?v=8fc1d56f:3152 BadConnectionError
remotedev.js?v=8fc1d56f:2344 Uncaught SocketProtocolError
prelude.fs:15 New message: Msg
prelude.fs:15 Updated state: Model
prelude.fs:15 Updated subs: FSharpList
remotedev.js?v=8fc1d56f:1095 WebSocket connection to 'ws://localhost:8000/socketcluster/' failed:
createWebSocket @ remotedev.js?v=8fc1d56f:1095
remotedev.js?v=8fc1d56f:2344 Uncaught SocketProtocolError
remotedev.js?v=8fc1d56f:1095 WebSocket connection to 'ws://localhost:8000/socketcluster/' failed:

….. it then keeps repeating these errors continually.

Also it throws the following errors:

remotedev.js?v=8fc1d56f:2344 Uncaught SocketProtocolErrorcode: 1006 message: "Socket hung up" name: "SocketProtocolError"stack: "Error\n at new SocketProtocolError (http://[::1]:8080/@fs/tmp/testVanillaSafeStack/node_modules/.vite/deps/remotedev.js?v=8fc1d56f:602:22)\n at SCClientSocket._onSCClose (http://[::1]:8080/@fs/tmp/testVanillaSafeStack/node_modules/.vite/deps/remotedev.js?v=8fc1d56f:2417:19)\n at SCTransport. (http://[::1]:8080/@fs/tmp/testVanillaSafeStack/node_modules/.vite/deps/remotedev.js?npm@10.2.5v=8fc1d56f:2146:17)\n at Emitter.emit (http://[::1]:8080/@fs/tmp/testVanillaSafeStack/node_modules/.vite/deps/remotedev.js?v=8fc1d56f:383:24)\n at SCTransport._onClose (http://[::1]:8080/@fs/tmp/testVanillaSafeStack/node_modules/.vite/deps/remotedev.js?v=8fc1d56f:1250:32)\n at SCTransport.wsSocket.onerror (http://[::1]:8080/@fs/tmp/testVanillaSafeStack/node_modules/.vite/deps/remotedev.js?v=8fc1d56f:1142:17)"[[Prototype]]: Error[[Prototype]]: Objectconstructor: ƒ Error()message: ""name: "Error"toString: ƒ toString()[[Prototype]]: Object

and

SCTransport @ remotedev.js?v=8fc1d56f:1122
SCClientSocket.connect.SCClientSocket.open @ remotedev.js?v=8fc1d56f:2132
(anonymous) @ remotedev.js?v=8fc1d56f:2311

and

remotedev.js?v=8fc1d56f:2344 Uncaught SocketProtocolError {name: 'SocketProtocolError', message: 'Socket hung up', code: 1006, stack: 'Error\n at new SocketProtocolError (http://[::1]…dules/.vite/deps/remotedev.js?v=8fc1d56f:1142:17)'}
(anonymous) @ remotedev.js?v=8fc1d56f:2344
setTimeout (async)
SCClientSocket._onSCError @ remotedev.js?v=8fc1d56f:2342
SCClientSocket._onSCClose @ remotedev.js?v=8fc1d56f:2418
(anonymous) @ remotedev.js?v=8fc1d56f:2146
Emitter.emit @ remotedev.js?v=8fc1d56f:383
SCTransport._onClose @ remotedev.js?v=8fc1d56f:1250
SCTransport.wsSocket.onerror @ remotedev.js?v=8fc1d56f:1142
error (async)
SCTransport @ remotedev.js?v=8fc1d56f:1140
SCClientSocket.connect.SCClientSocket.open @ remotedev.js?v=8fc1d56f:2132
(anonymous) @ remotedev.js?v=8fc1d56f:2311

and

SCClientSocket._onSCError @ remotedev.js?v=8fc1d56f:2342
SCClientSocket._onSCClose @ remotedev.js?v=8fc1d56f:2418
(anonymous) @ remotedev.js?v=8fc1d56f:2146
Emitter.emit @ remotedev.js?v=8fc1d56f:383
SCTransport._onClose @ remotedev.js?v=8fc1d56f:1250
SCTransport.wsSocket.onerror @ remotedev.js?v=8fc1d56f:1142

It keeps repeating the errors as it retries.

I have checked the default firewall on the ubuntu and tried it disabled and enabled and still get the same errors.

Note on ubuntu localhost by default maps to use IPv6 so I forced it to use IPv4 on 127.0.0.1 in the vite config file in the Client directory, but I get identical error. i.e. used http and ws on both localhost IPv6 then tried it on localhost on IPv4 (I was not expecting any difference but tried it just in case).

Any clues on how to further try to debug this will be much appreciated.

Thanks

[PiotrW3106]

Having poked about some more

1. the remotedev v0.2.9 libary appears to be very old (7th Dec 2018) and unmaintained Package update? zalmoxisus/remotedev#23
2. it appears to use a "very obsolete version of socketcluster-client which is incompatible with new socketcluster-server"
3. It appears to be used for the Elimsh debugger
4. Now not sure if this is part of the problem with HMR or whether the errors it is throwing are only to do with the Elmish debugger.

[PiotrW3106]

Solved:
For anyone else who comes across this problem
Mangel Maxime's very helpful comment on the Fsharp Slack :
"This error is because you don't have the Redux dev tool extension installed: https://github.com/reduxjs/redux-devtools
You can either install it or comment out the Program.withDebugger (or something like that.
http://youtube.com/watch?v=xsSnOQynTHs"

[mattgallagher92]

Thanks for sharing the solution @PiotrW3106!