HMR fails to connect when linked externally.

[timdorr]

🐛 bug report

Since #6005 landed, I am unable to use HMR with Parcel acting as an external server. That is, I have another server that renders our HTML and includes the Parcel build output via a <script> tag. It uses the port of the HTML rendering server when trying to connect to the HMR WebSocket.

🎛 Configuration (.babelrc, package.json, cli command)

CLI command:

yarn parcel serve client/index.tsx --https --cert ./tls.crt --key ./tls.key

<script defer src="https://localhost:1234/index.js"></script>

🤔 Expected Behavior

It should use the port number explicitly in the generated output for the HMR runtime.

😯 Current Behavior

My HTML rendering server runs on port 10000, so I get this message in my browser:

WebSocket connection to 'wss://localhost:10000/' failed: 

💁 Possible Solution

Side note: I noticed that --hmr-port does set the port in the runtime, but doesn't actually open a server on that port for updates. That might be a possible solution.

Maybe add a --no-hmr-port option to resolve the issue #6005 was trying to address, but revert the change for the default case.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.631
Node	14.15.1
npm/Yarn	yarn@1.22.10
Operating System	macOS Big Sur

[mischnic]

So all combinations I can think of are:

1. parcel serve and opening http://localhost:1234/index.html
2. parcel watch and bringing your own HTTP server
3. 1 but proxied (e.g. ngrok) to a different domain/port (https://abc.ngrok.io), ideally http://localhost:1234 would still work fine
4. 1 but serving HTML youself (Parcel serves JS)

[101arrowz]

I just found that #6005 also breaks HMR for web extensions with serve because location.port doesn't actually work in an extension context. I guess a working solution is to specify a different --hmr-port but it's not optimal.

EDIT: After looking again everything is fine with watch but sometimes you like to debug the extension pages from a web context instead of using the extension directly.

[drmercer]

What I'm seeing on a fresh install (version 2.3.2) after following the official Web Extension recipe:

• watch doesn't work at all - HMR_PORT is always null and I can't figure out why
• serve works, but only if I manually set the port and HMR port to be different, as explained in Parcel hot module reload doesn't work in a Chrome extension background script unless you force the ports to be different. #7454 (which is possibly caused by this issue, according to the comments).

[101arrowz]

@drmercer Have you been doing parcel watch --hmr-port 5678 or any other port? That worked when I last tried it.