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.
5.46.02.49.27.3.0experimental: { async: true }pnpmpnpm install
pnpm run dev --open /first
/first (used as a clean entry point)./second)./second page, click the link to "Third" (/second/some-id).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).
The UI remains stuck on the state of the previous route.
Actual Text: "Second Page" persists in the red box.
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.
/second to /second/[id]. Direct navigation to /second/[id] (or navigating there from /first) does not seem to trigger the hang.+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