Hot module replacement - WebSocket connection failed

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:

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!

@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

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

1 Like