-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
Describe the bug
When using experimental: { async: true } in Svelte config, components rendered inside svelte:boundary pending snippets have their DOM elements created, but lifecycle events (onMount, $effect, use: actions, @attach) never execute.
Components render visually but any initialization logic dependent on these lifecycle hooks fails silently.
Expected Behavior
Lifecycle events should execute normally for components inside svelte:boundary pending snippets, regardless of the experimental.async setting.
Actual Behavior
Components inside pending snippets:
- ✅ Render to DOM (elements are visible)
- ❌
onMount()callbacks don't fire - ❌
$effect()callbacks don't fire - ❌
use:actions don't initialize - ❌
@attach()callbacks don't fire
Reproduction
Setup
- Enable async mode in
svelte.config.js:
compilerOptions: {
experimental: {
async: true,
},
}- Create a component with lifecycle hooks (e.g.,
Shimmer.svelte):
<script>
import { onMount } from 'svelte';
let { delay = 0 } = $props();
let visible = $state(false);
onMount(() => {
console.log('onMount fired'); // Never logs
});
$effect(() => {
console.log('$effect fired'); // Never logs
if (delay > 0) {
setTimeout(() => { visible = true; }, delay);
}
});
</script>
{#if visible}
<div>Shimmer content</div>
{/if}- Use the component inside a
svelte:boundarypending snippet:
<svelte:boundary>
{@const data = await fetchData()}
{#snippet pending()}
<Shimmer delay={500} />
{/snippet}
</svelte:boundary>Expected Result
- Component renders
onMountcallback executes$effectcallback executes- Component initializes properly (e.g., delay timer starts)
Actual Result
- Component renders to DOM
- No lifecycle callbacks execute
- Component remains uninitialized (e.g., delay timer never starts,
visiblestaysfalse)
Environment
- Svelte version: 5.x (with
experimental.async: true) - Framework: SvelteKit
- Browser: All browsers (browser-agnostic issue)
Additional Context
This prevents implementing delayed loading states (e.g., showing shimmer only after 500ms delay) when components rely on lifecycle hooks for initialization. The workaround is to move lifecycle logic outside the component or avoid using svelte:boundary pending snippets with components that need initialization.
Logs
System Info
System:
OS: macOS 15.6
CPU: (8) arm64 Apple M2
Memory: 188.53 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.13.1 - /opt/homebrew/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 11.7.0 - /opt/homebrew/bin/npm
pnpm: 10.23.0 - /opt/homebrew/bin/pnpm
Browsers:
Firefox: 145.0
Safari: 18.6
npmPackages:
svelte: ~5.45 => 5.45.6Severity
blocking an upgrade