Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

full page reload every server update, HMR, vite #9241

Closed
vqt123 opened this issue Feb 28, 2023 · 7 comments
Closed

full page reload every server update, HMR, vite #9241

vqt123 opened this issue Feb 28, 2023 · 7 comments
Milestone

Comments

@vqt123
Copy link

vqt123 commented Feb 28, 2023

Describe the problem

Vite aggressively reloads the entire app every time there's a server change. API change? Reload. +page.server change? Reload.

Trying to test a big form for instance that constantly resets form values every time you save the action feels so bad.

Rich has this issue open vitejs/vite#7887

but the DX right now because of this is so bad that I beg we have a workaround.

Describe the proposed solution

Coerce someone at vite to address vitejs/vite#7887

or gives us a workaround

Alternatives considered

No response

Importance

i cannot use SvelteKit without it

Additional Information

No response

@vqt123
Copy link
Author

vqt123 commented Feb 28, 2023

(Not a valid workaround)

After digging into vite docs and vite forums, i found the vite config options to ignore typescript files

vite.config.ts

export default defineConfig({
	plugins: [sveltekit()],

	server: {
		watch: {
			ignored: ['**.ts']
		}
	}
});

but now there's no way to easily rebuild the server files other than restarting vite

@vqt123
Copy link
Author

vqt123 commented Feb 28, 2023

Ok, found an acceptable workaround thanks to this vite post from about a year ago.

vitejs/vite#6695

Included this in my +layout.svelte (Or any svelte file you wish to not to full page reload on server changes)

+layout.svelte, or +page.svelte

<script>
	if (import.meta.hot) {
		import.meta.hot.on('vite:beforeFullReload', () => {
			throw '(skipping full reload)';
		});
	}
</script>

All server file changes still compile however this prevents your front-end from completely reloading.

@vqt123 vqt123 changed the title reload every server update, HMR, Vite ssrLoadModule full page reload every server update, HMR, vite Feb 28, 2023
@david-plugge
Copy link
Contributor

You could also call invalidateAll to rerun server load functions if that's not already handled by sveltekit

@amr3k
Copy link
Contributor

amr3k commented Mar 2, 2023

Thanks so much, this really helped me preserving the form state while developing

@Rich-Harris Rich-Harris added this to the later milestone Mar 4, 2023
@rob-3
Copy link

rob-3 commented Oct 2, 2023

Putting // @hmr:keep-all for whole-component or // @hmr:keep in the script tag from here was good enough for my uses

@achamas-playco
Copy link

achamas-playco commented Oct 26, 2023

Just add this to your client-side code:

if (import.meta.hot) {
   import.meta.hot.accept(() => {
      import.meta.hot!.invalidate();
   });
}

It will force a full page reload for every HMR action.

@eltigerchino
Copy link
Member

closing this now that vitejs/vite#7887 is resolved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants