Svelte Hot Reloading Issue

Question

Recently started playing with Svelte using the sveltejs template. Everything is working fine, however when I do any change in the files it doesn't hot reload the changes to the web browser, so I have to manually refresh the page to see the changes. Is there any option in the settings to enable that feature or is it not possible at this point?

Marivaux

Welcome to Stack Overflow Ben! Svelte 3 doesn't have hot reloading yet, but you could automatically refresh the browser on changes with e.g. the LiveReload Rollup plugin. – Shavers

In 2020, one can wait for SvelteKit svelte.dev/blog/whats-the-deal-with-sveltekit that replaces Rollup (in dev) with Snowpack. Official HMR. – Stocking

Answer 1

The default template (https://github.com/sveltejs/template) uses Rollup, which doesn't support hot module reloading. The webpack version (https://github.com/sveltejs/template-webpack) will support HMR, but first we need to add some hooks to Svelte itself to make it possible. There's an issue you can track here — hopefully we'll be able to do this work soon.

Until then, Tholle's suggestion of using the livereload plugin is probably the best compromise.

Fibula

A comment from Twitter suggests that Nollup could be used for HMR in a Rollup project — I haven't used it myself, YMMV, but it sounds promising mobile.twitter.com/PepsRyuu/status/1121808611217420290 – Fibula

Great job Rich, I am very impressed with v3. Any idea and timeline about TypeScript support? – Marivaux

No timeline, no — just 'when we get round to it'. It's a priority though! – Fibula

Just tested npx degit sveltejs/template my-app and npx degit "sveltejs/sapper-template#rollup" my-app, npm install and then npm run dev and both templates work with HMR out of the box. 2020-05-03 – Pensioner

You need to review your answer, it's no longer correct – Prognosticate

Answer 2

Update 2022-03-24

HMR is now officially supported in Svelte with Vite, Svelte Kit, and Webpack. The Snowpack plugin for Svelte also has HMR support.

The information bellow are essentially still current regarding HMR support in the Rollup universe.

With regard to HMR, today Vite (and Kit that uses it under the hood) is probably the best solution by far. It has excellent HMR support, and is very much faster during dev than bundle optimization oriented tools like Rollup.

(And so, the accepted answer is even more wrong now!)

---

Just for the kicks of contradicting the author about his own libs, I'm going to argue that the accepted answer is all wrong.

Rollup can have HMR with rollup-plugin-hot. As previously noted in the comments, Nollup can do it too.

With just that, you can have updated code pushed to the browser and refresh (i.e. destroy + recreate) your whole app without reloading the page. However that's not terribly better, if at all, than a full page reload.

What you want is to replace only the Svelte components that are affected by a code update, so that your current app state is preserved and, as much as possible, you also want the state of updated components to be preserved too. For this, you can use rollup-plugin-svelte-hot with Rollup / Nollup, or svelte-loader-hot with Webpack.

Pending official support, I maintain clones of the official templates + HMR: svelte-template-hot for Rollup / Nollup, and svelte-template-webpack-hot for Webpack. There is also sapper-template-hot for Sapper (only supports Webpack). And, for completeness, svelte-native-template (not maintained by me) also includes HMR support.

HMR is still not officially supported by Svelte. The issue mentioned in Rich's answer has been closed. Progress can now be tracked in this issue.

(Of course, Rich's answer was correct when it was initially written. And it is still correct from an official perspective. And this answer is a shameless plug to advertise my own projects because the question ranks pretty high in Google, but I hope it is useful nonetheless.)

Oxytetracycline

Is it expected that the hot reload in the default SvelteKit setup with Vite loses state on every edit? Coming from a React hot reload setup I use at work, it's so jarring. – Calcium

@Calcium If you mean all state, no this is not expected, you may have found a bug. If you mean the state of the component affected by the change and its children, yes it is expected. For some reason (assignment syntax, I guess), state preservation in Svelte turned out very confusing in some situations, so we turned it off by default. See: github.com/sveltejs/vite-plugin-svelte/blob/main/docs/…. – Oxytetracycline

Turns out it was just that off by default behavior. I was able to turn it on and it’s all good now. It certainly felt like I was losing all state, but I was only getting started with this project and it was pretty simple. Maybe that’s why. – Calcium