HMR-related hydration bug with clear reproduction but requires Svelte internals knowledge.
The issue describes a HMR-related hydration bug during soft reloads in development mode, with a clear reproduction path. Fixing it would require understanding Svelte's HMR and hydration internals, but the problem is isolated to development mode only. The main blocker is needing deep knowledge of Svelte's runtime operations.
When running SvelteKit in development mode, performing a soft reload (Ctrl+R or clicking refresh) causes the following error:
TypeError: can't access property "call", first_child_getter is undefined
get_first_child operations.js:89
from_html template.js:71
add_locations elements.js:15
Root root.svelte:68
effect2 hmr.js:50
update_reaction runtime.js:260
update_effect runtime.js:439
create_effect effects.js:124
branch effects.js:419
wrapper hmr.js:41
update_reaction runtime.js:260
update_effect runtime.js:439
create_effect effects.js:124
block effects.js:396
wrapper hmr.js:30
unmount2 render.js:228
...
Hard reload (Ctrl+Shift+R) works fine. The error only occurs on soft reload.
Additionally, after this error occurs, the page becomes completely unresponsive - no interactions (clicks, inputs, etc.) work until a hard reload is performed.
npm run devSoft reload should work without errors, same as hard reload. The page should remain interactive after reload.
Setting hmr: false in vite.config.ts prevents the error but disables HMR entirely:
// vite.config.ts
export default defineConfig({
server: {
hmr: false
}
});
operations.js:89 in Svelte's internal DOM operationsnpm run build && npm run preview, no errors on soft reloadClaim this issue to let others know you're working on it. You'll earn 10 points when you complete it!