Svelte Hot Reloading Issue

svelte hot-reload
Ben Dev picture Ben Dev · Apr 25, 2019 · Viewed 7.5k times · Source

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?

Answer

Rich Harris picture Rich Harris · Apr 25, 2019

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.

Related questions

Cannot access 'variable_name' before initialization

When using reactive variables by declaring them using the $: syntax, you get the following error. Cannot access 'variable_name' before initialization Here is the code: App.svelte <script> import { ledzep, redhotchilis } from './data.js' $: bandmembers = [...ledzep, ...redhotchilis] …

Read More
How to pass parameters to on:click in Svelte?

Binding a function to a button is easy and straightforward: <button on:click={handleClick}> Clicks are handled by the handleClick function! </button> But I don't see a way to pass parameters (arguments) to the function, when …

Read More
How to use local static images in Svelte

I was following the tutorial (https://svelte.dev/tutorial/dynamic-attributes) to import local image files. But it didn't work. The image was not found in the app. Where do I need to locate these images in order to make it …

Read More