Hot module replacement - WebSocket connection failed

Support Uncategorized
1

I have a problem when I try to use Parceljs (GitHub - parcel-bundler/parcel: The zero configuration build tool for the web. 📦🚀) with hot module replacement to bundle assets in my theme. I can only see changes in styles and javascript after I manually reload the page, I can’t get the Hot module replacement to work properly when I develop in Local.

Error in console says:

WebSocket connection to 'ws://parceltimberstarter.local:49253/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Just like in the screenshot below:

Zrzut ekranu (31)
Zrzut ekranu (31)1920×1080 270 KB

Parcel is so-called 0-config bundler so maybe it makes some wrong assumptions here that prevents HMR from working - in such case it’s not an issue with Local but with Parcel, but I’m not sure. It would be great to make it work.
Thanks for any hints!

2

@paweltar,

It’s trying to access the Local site for the HMR but 49253 is being served by your PC and not the VM that Local is using.

Long story short, it needs to use localhost and not parceltimberstarter.local. You can tell Parcel to use a different hostname by using the --hmr-hostname CLI option. See https://github.com/parcel-bundler/parcel/blob/5c5d5f8af634c0e0aa8e8a3542892febe7c27e85/src/cli.js#L21

3

Yes, thanks a lot! I’ve added --hmr-hostname localhost and it works perfectly.

1 Like