Preact-cli: Hot reloading / prefresh does not work when `preact watch` uses a randomized port as a backup

[illeatmyhat]

Do you want to request a _feature_ or report a _bug_?
Bug

What is the current behaviour?
I created a project using preact create typescript foo and ran yarn dev --refresh
When changing the text in the pages, the browser does not automatically refresh.

If the current behaviour is a bug, please provide the steps to reproduce.

Please mention other relevant information.

Please paste the results of preact info here.

Environment Info:
  System:
    OS: macOS 11.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.3.0 - /var/folders/t2/z034js610b32x5_021z93_4m0000gn/T/yarn--1612402454544-0.6352245034714299/node
    Yarn: 1.22.4 - /var/folders/t2/z034js610b32x5_021z93_4m0000gn/T/yarn--1612402454544-0.6352245034714299/yarn
    npm: 7.5.2 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.146
    Safari: 14.0.3
  npmPackages:
    preact: ^10.3.1 => 10.5.12 
    preact-cli: ^3.0.0 => 3.0.5 
    preact-render-to-string: ^5.1.4 => 5.1.12 
    preact-router: ^3.2.1 => 3.2.1 

[rschristian]

Interesting. Can't reproduce, though I'm on a different platform.

In your browser's networking tab you should be able to see the socket connections used for HMR. Can you see anything odd there, like an error? I'm not super well acquainted with the HMR set up, but can help debug at least.

[illeatmyhat]

I think I've figured out the problem.
I often have a devcontainer running at port 8080, so preact watch switches to a random port.
In the browser console, I get these logs:

[HMR] Waiting for update signal from WDS...    log.js?86f8:24 
[WDS] Disconnected!                            index.js?21b9:172 
    close @ index.js?21b9:172

It also sends requests to http://0.0.0.0:8080/sockjs-node/info?t=1612495726394 which fail because a different service is running on that port than expected.

yarn dev -p 8081 refreshes as expected.
This leads me to believe that HMR uses the port from preact watch correctly, but does not correctly use the random port that is assigned in case of conflicts.
I've changed the issue name to reflect this.

[rschristian]

You're totally right, nice find. I'll fix that and get a PR together.

[rschristian]

Hmm I'm getting strange issues with Prefresh itself now with the cli source. I'll have to look into this more tomorrow likely.