svelte-async-router-issue Svelte Themes

Svelte Async Router Issue

Demo repo for bug with async svelte

Bug Reproduction: Svelte Async Reactivity Issue

Description

This repository demonstrates a reactivity failure in Svelte 5 when the experimental async compiler is enabled. During a specific navigation sequence, the DOM fails to update to the new route's content, leaving the previous page's UI visible despite the URL changing.

Environment Details

  • Svelte: 5.46.0
  • SvelteKit: 2.49.2
  • Vite: 7.3.0
  • Compiler Option: experimental: { async: true }
  • Package Manager: pnpm

Reproduction Steps

  1. Install & Start:
pnpm install
pnpm run dev --open /first
  1. Navigation Path:
  • Step 1: Start at /first (used as a clean entry point).
  • Step 2: Click the link to navigate to "Second" (/second).
  • Step 3: From the /second page, click the link to "Third" (/second/some-id).

Observed Behavior

Expected Behavior

After Step 3, the UI should render the content of src/routes/second/[id]/+page.svelte.

Expected Text: "Third Page - Success" (inside the red box).

Actual Behavior

The UI remains stuck on the state of the previous route.

Actual Text: "Second Page" persists in the red box.


Project Structure & Findings

The bug appears to be sensitive to the routing hierarchy and the presence (or absence) of layout files.

.
├── svelte.config.js           # Includes experimental: { async: true }
└── src/
    └── routes/
        ├── +layout.svelte     # Root layout
        ├── first/
        │   ├── +layout.svelte
        │   └── +page.svelte   # Start here
        └── second/
            ├── [id]/
            │   └── +page.svelte  # "Third" page (Fails to render)
            ├── +page.svelte      # "Second" page
            └── +layout.svelte.removed  # Observation: Renaming this to +layout.svelte
                                        # causes the bug to disappear.

Key Observations

  • Sequence is Important: The failure only occurs when navigating sequentially from /second to /second/[id]. Direct navigation to /second/[id] (or navigating there from /first) does not seem to trigger the hang.
  • Compiler Dependency: The issue is strictly tied to the experimental.async: true flag. If this flag is disabled, the navigation works as expected.
  • Layout Influence: If a +layout.svelte file exists in the second/ directory, the bug disappears. While Svelte does not require a layout here, adding one appears to change how the async compiler manages the transition between the parent and child route, preventing the UI from getting stuck

Top categories

Loading Svelte Themes