Allow preventing default actions of client.js

[Artur-]

Clear and concise description of the problem

Some users have brought up that they want live reload temporarily disabled.

The use case is that they are modifying styles in the browser inspector instead of modifying the project files. Once they are done with styles modifications, they go through their changes and copy them to the project files. If you have live reload enabled when you do this then a full page reload can take place after the first changes are copied to a project file and that file is saved. When this happens, all remaining changes are lost.

Suggested solution

Allow listeners like vite:beforeFullReload to call payload.preventDefault() which will stop client.js from taking any actions.

Alternative

No response

Additional context

No response

Validations

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

[ygj6]

You can disable HMR by set server.hmr to false.

[Artur-]

Ah, I forgot to mention that it would be preferrable to do it runtime through a UI control in our case

[ygj6]

The scene is a little too special. Maybe you can put a breakpoint on @vite/client to stop the page reload.

[Artur-]

I can agree that it is quite a special case and might be solvable with the conf option.

There is another case also where this has come up which is:

1. You are on page /
2. You click to navigate to /hello
3. The router starts loading a JS bundle needed by /hello and when finished, updates the URL and the view content
4. Before the JS bundle is loaded, Vite does a page reload

Result: you are still on / after navigating to /hello which is quite unexpected

[jacksleight]

Does anyone know if it's possible to get the method suggested by @cdauth in #6695 (comment) to work in Vite 5?

I've upgraded to 5.1.1 and despite throwing in vite:beforeFullReload the page still refreshes.

If I downgrade to 4.5.2 it works.

[obeobe]

I also encountered the same issue as @jacksleight .

I'm just trying Vite out and considering to switch from Webpack.
Browser page refresh is a blocker for me.

Refreshing the browser resets all state and is an incredibly intrusive action.

I get the concern about leaving the app in a supposedly inconsistent state with the code - but why take the paternalistic approach? I am not a newbie. I know what I'm doing and I want to be in control (without losing HMR altogether).

[obeobe]

@jacksleight -

I found two workarounds:

1. Relatively clean but annoying: prompt before browser refresh. It's annoying because it will show an alert, but at least it will give you a chance to click on "Cancel" and avoid the refresh. Just add this code in your application initialization:

window.addEventListener('beforeunload', function(e) {
	e.preventDefault();
	e.returnValue = '';
});

2. Dirty but not annoying: modify Vite code in node_modules/vite/dist/client/client.mjs and add a break after `case 'full-reload':
   

Obviously this will need to be re-applied when updating Vite...

Note that you need to restart the server for this change to take effect.

[cdauth]

Here is a very hacky workaround that will definitely not work forever:

if (import.meta.hot) {
	// Prevent full reload, see https://github.com/vitejs/vite/issues/5763#issuecomment-1974235806
	import.meta.hot.on('vite:beforeFullReload', (payload) => {
		payload.path = "(WORKAROUND).html";
	});
}

[rmacklin]

@patak-dev Is there any chance you'd reconsider #6695 independently from this issue?

That issue was closed in favor of this one, but I feel that one has a smaller scope than this issue and like @cdauth I would prefer to simply run my vite server with full reloads completely disabled. (Though unlike @cdauth, I don't care if this also disables hot reloads - I already run with server: { hmr: false }, but I still get the frustratingly disruptive full page reloads when switching between branches.)

Let me elaborate on why these full page reloads can be so painful: Imagine you are working on the current code and you notice some unexpected behavior. You want to keep your app loaded in this state so you can interact with it, but you also want to go check out an older revision and check the behavior there side-by-side. So you git checkout the old revision and--OOPS! Vite just reloaded the page you wanted it to leave alone; now you can't do your side-by-side comparison.

Hopefully that helps illustrate the pain. There are ways to work around this, but it would be ideal if we could just "set and forget" a vite option if we want to be in control of when our pages reload.

[GoJermangoGo]

Since #5763 (comment) no longer works and #17447 was closed and locked, here's another quick hack to disable the page refresh. Place this chicanery in your package.json. It works by commenting out location.reload() in vite's source code, and can survive through any npm reinstalls.

"scripts": {
	"start": "node -e \"require('fs');const file='node_modules/vite/dist/client/client.mjs';fs.writeFileSync(file,fs.readFileSync(file,'utf8').replace(/(?<!\\/\\/)(location\\.reload\\(\\))/g,'//\\$1'))\" && vite",
]

[mnpenner]

I think this should be a setting in vite.config.ts instead of having to put some hack in my index.ts file to block the full reload. Something like server.hmr: 'hot-only'. It can log a warning to the console or something to tell us we need to manually refresh to see changes, but just randomly wiping out my forms with lots of data and files is incredibly disruptive.

[kaiyoma]

I'm on a team with many dozens of UI developers and this issue comes up a lot. And every time I have to explain: "Vite 4 allowed a hack to prevent the page reload, but Vite 5 does not." 🤷 There should absolutely be a config option for this.

[cdauth]

For me my workaround still works, both with Vite 5 and Vite 6.

[kaiyoma]

For me my workaround still works, both with Vite 5 and Vite 6.

@cdauth What's your workaround? Everyone else has said theirs stopped working in Vite 5.

[cdauth]

@kaiyoma The one from #5763 (comment).