sveltejs/svelte

Experimental Async with preload and conditional bind:this kills reactivity

Opened this issue · 4 comments

ronbrogan commented

Describe the bug

With hover preloading on and async enabled, it seems that conditional bind:this can somehow break reactivity for the application.

Minimal repro below. The select box uses the bind:this for absolutely nothing in the repro, but it still breaks. Remove the bind:this, disable preloading, or disable async and things behave as expected.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-zl41pabn?file=src%2Froutes%2F%2Bpage.svelte

Logs



System Info


System:
    OS: Windows 10 10.0.19045
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 31.45 GB / 63.89 GB
  Binaries:
    Node: 22.12.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.0 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Chrome: 141.0.7390.123
    Edge: Chromium (140.0.3485.54)
    Firefox: 144.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe
    Firefox Developer Edition: 137.0 - C:\Program Files\Firefox Developer Edition\firefox.exe
    Internet Explorer: 11.0.19041.5794


Severity


annoyance
sillvva commented 
Seems to be another issue related to fork. Broken in svelte@5.42.0, working in 5.41.4.
microdou commented 
I'm also stuck at 5.41.4. Wasn't able to find a minimal reproduction. bind:this could be the trigger.
nevil2 commented 
Just updated to Svelte 5.43.5.  Fixes a number of issues I was experiencing (e.g. loss of reactivity on submission).  So I will stick with it if I can.


However, this bug remains.  It appears to me that components are initialised on preloading without their props.


My SvelteKit sites (Svelte 5.43.5/ SvelteKit 2.48.4) are unusable with hover preloading on and async enable.


Switching preloading off enables site to function normally (at least the experience so far).
  • 👍1
microdou commented 
Nice workaround, @nevil2 ! No issue on svelte 5.43.5 so far after disabling data-sveltekit-preload-data