HMR is broken: Vite shows websocket error using react embedded app when using --use-localhost

[Sam_Smith]

When using --use-localhost the app loads (app is embedded using react + vite) and I can see the app frontend.

But I noticed that vite gives this websocket error,

After this, if I make any changes to the code, HMR is broken. Vite tries to update, but I do not see those changes in the app, it continues to show the initial load.

This is almost same vite configuration and most of the code is similar to this codebase,

OS: MacOS
shopify.web.toml is

roles = ["frontend"]

[commands]
dev = "npm run dev"
build = "npm run build"

[Liam-Shopify]

Hey Sam,

We’re looking into this as a possible issue on our side. Will update here asap.

[NickWesselman]

@Sam_Smith

This is almost same vite configuration and most of the code is similar to this codebase

Hey Sam! Sorry for the delayed reply. I created a basic app using that same Vite config, and I was able to reproduce the issue. The problem is these lines, which don’t account for a port in the URL:

vite.config.js

You can resolve the issue by replacing the const host definition with the cleaner approach from the Remix template:

vite.config.ts

Let us know if this fixes it for you as well.

[Sam_Smith]

Yes, this solves the issue. Thank you!