Disabling WebSocket and HMR

[gderiyenko]

Description

Some users are actively seeking ways to disable HMR (#13994).

With HML enabled, and reactive components are partially rendered, it is unpredictable #18217 when page reload happens. From my personal experience, the page reloads multiple times, even during simple navigation within the project.

Suggested solution

Please provide an option for users to disable WebSocket and HMR.

    server: {
        socket: false,
        hmr: false,
    },

A single page reload after updating code in the editor is sufficient and might be optimal solution. Fortunately, Vite is capable of updating CSS and JS files even without WebSocket enabled.

Alternative

Additional context

Normally I do not change the library's code. However, this changes made my developing experience much more predictable and less annoying with unexpected reloads.

function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {
  if (!socketEnabled) return;

Thanks.

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

If you want to disable HMR, server.hmr: false should work. Do you want to disable the auto refresh?

[gderiyenko]

@sapphi-red Yes, I know that this directive exists. And it works, but throws an error into console.

in library's client.js code it looks like this:

if hmrPort is disabled, throw console.error for 5 lines.

if (!hmrPort) {
fallback = () => {
socket = setupWebSocket(socketProtocol, directSocketHost, () => {
const currentScriptHostURL = new URL(import.meta.url);
const currentScriptHost = currentScriptHostURL.host + currentScriptHostURL.pathname.replace(/@vite\/client$/, "");
console.error(
`[vite] failed to connect to websocket.
your current setup:
(browser) ${currentScriptHost} <--[HTTP]--> ${serverHost} (server)
(browser) ${socketHost} <--[WebSocket (failing)]--> ${directSocketHost} (server)
Check out your Vite / network configuration and https://vite.dev/config/server-options.html#server-hmr .`
);
});

My proposed solution disables auto refresh, displays a warning, and provides users with the option to disable WebSocket.

[sapphi-red]

That error is showing that the WebSocket connection is failed. WebSocket is used for features other than HMR so it cannot be disabled. If server.hmr: false correctly disables HMR, what are you trying to achieve and why?

[gderiyenko]

I'm ok with the only feature of Vite to build JS and CSS. Whatever purpose WebSockets serve, I don't need them.

When I muted setupWebSocket it solved the problems of hot reload, and console errors all together. I hope this makes sense.

[gderiyenko]

To summarize:

1. When I deliberately set HMR to 'false', I do not expect errors like "failed to connect to WebSocket" to be thrown.

2. When HMR is enabled, WebSocket performs several functions:

   • establishes connection;
   • throws errors if connection issues occur.
   • tries to resolve overlay via page reload;
   • implements Hot Module Replacement (HMR) which often causes overlays , and eventually leads to page reload.

Both scenarios can be frustrating. Please review my suggestion (see 'Alternative' image) for disabling HMR and page reloads by turning the WebSocket off.

Thank you!

[blueshack112]

Guys, this is trivial. Please. I have a situation where I am doing a simple yarn dev command on a testing server but the websockets console errors are driving me crazy because it is driving my QA crazy. It should not be that hard. Whatever happens when the mode is production, we should be able to replicate that through some custom settings.

Disabling this feature only by setting the mode to production does not sound like a good idea.