sveltejs · PatrickG · Oct 7, 2025 · Oct 7, 2025 · Oct 8, 2025 · Oct 8, 2025
diff --git a/.changeset/ten-rats-spend.md b/.changeset/ten-rats-spend.md
@@ -0,0 +1,6 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: `afterNavigate` callback not running after hydration when experimental async is enabled
+fix: Snapshot `restore` method not called after reload when experimental async is enabled
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
@@ -545,7 +545,7 @@ async function _preload_code(url) {
  * @param {HTMLElement} target
  * @param {boolean} hydrate
  */
-function initialize(result, target, hydrate) {
+async function initialize(result, target, hydrate) {
 	if (DEV && result.state.error && document.querySelector('vite-error-overlay')) return;
 
 	current = result.state;
@@ -563,6 +563,10 @@ function initialize(result, target, hydrate) {
 		sync: false
 	});
 
+	// Wait for a microtask in case svelte experimental async is enabled,
+	// which causes component script blocks to run asynchronously
+	void (await Promise.resolve());
+
 	restore_snapshot(current_navigation_index);
 
 	if (hydrate) {
@@ -1691,7 +1695,7 @@ async function navigate({
 		update(navigation_result.props.page);
 		has_navigated = true;
 	} else {
-		initialize(navigation_result, target, false);
+		await initialize(navigation_result, target, false);
 	}
 
 	const { activeElement } = document;
@@ -2794,7 +2798,7 @@ async function _hydrate(
 		result.props.page.state = {};
 	}
 
-	initialize(result, target, hydrate);
+	await initialize(result, target, hydrate);
 }
 
 /**

diff --git a/packages/kit/test/apps/async/package.json b/packages/kit/test/apps/async/package.json
@@ -0,0 +1,24 @@
+{
+	"name": "test-async",
+	"private": true,
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync",
+		"check": "svelte-kit sync && tsc && svelte-check",
+		"test": "pnpm test:dev && pnpm test:build",
+		"test:dev": "DEV=true playwright test",
+		"test:build": "playwright test"
+	},
+	"devDependencies": {
+		"@sveltejs/kit": "workspace:^",
+		"@sveltejs/vite-plugin-svelte": "catalog:",
+		"svelte": "catalog:",
+		"svelte-check": "catalog:",
+		"typescript": "^5.5.4",
+		"vite": "catalog:"
+	},
+	"type": "module"
+}
diff --git a/packages/kit/test/apps/async/playwright.config.js b/packages/kit/test/apps/async/playwright.config.js
@@ -0,0 +1 @@
+export { config as default } from '../../utils.js';
diff --git a/packages/kit/test/apps/async/src/app.html b/packages/kit/test/apps/async/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/packages/kit/test/apps/async/src/routes/+layout.svelte b/packages/kit/test/apps/async/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { setup } from '../../../../setup.js';
+
+	setup();
+
+	let { children } = $props();
+</script>
+
+{@render children()}
diff --git a/packages/kit/test/apps/async/src/routes/+page.svelte b/packages/kit/test/apps/async/src/routes/+page.svelte
@@ -0,0 +1 @@
+<p>home</p>
diff --git a/packages/kit/test/apps/async/src/routes/after_navigate/+page.svelte b/packages/kit/test/apps/async/src/routes/after_navigate/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { afterNavigate } from '$app/navigation';
+
+	let runs = 0;
+	afterNavigate(() => {
+		runs += 1;
+	});
+</script>
+
+<pre>{runs}</pre>
diff --git a/packages/kit/test/apps/async/src/routes/snapshot/+page.svelte b/packages/kit/test/apps/async/src/routes/snapshot/+page.svelte
@@ -0,0 +1,14 @@
+<script>
+	let restored = 'initial';
+
+	export const snapshot = {
+		capture() {
+			return { restored: 'yes' };
+		},
+		restore(v) {
+			restored = v;
+		}
+	};
+</script>
+
+<pre>{JSON.stringify(restored)}</pre>
diff --git a/packages/kit/test/apps/async/static/favicon.png b/packages/kit/test/apps/async/static/favicon.png
diff --git a/packages/kit/test/apps/async/svelte.config.js b/packages/kit/test/apps/async/svelte.config.js
@@ -0,0 +1,11 @@
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {},
+	compilerOptions: {
+		experimental: {
+			async: true
+		}
+	}
+};
+
+export default config;
diff --git a/packages/kit/test/apps/async/test/test.js b/packages/kit/test/apps/async/test/test.js
@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test';
+import { test } from '../../../utils.js';
+
+/** @typedef {import('@playwright/test').Response} Response */
+
+test.skip(({ javaScriptEnabled }) => !javaScriptEnabled);
+
+test.describe.configure({ mode: 'parallel' });
+
+test('afterNavigate runs after hydration', async ({ page }) => {
+	await page.goto('/after_navigate');
+
+	expect(await page.innerText('pre')).toBe('1');
+});
+
+test('snapshots are restored after reload', async ({ page }) => {
+	await page.goto('/snapshot');
+	await page.reload();
+	expect(await page.innerText('pre')).toBe('{"restored":"yes"}');
+});
diff --git a/packages/kit/test/apps/async/tsconfig.json b/packages/kit/test/apps/async/tsconfig.json
@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"noEmit": true,
+		"resolveJsonModule": true
+	},
+	"extends": "./.svelte-kit/tsconfig.json"
+}
diff --git a/packages/kit/test/apps/async/vite.config.js b/packages/kit/test/apps/async/vite.config.js
@@ -0,0 +1,21 @@
+import * as path from 'node:path';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	build: {
+		minify: false
+	},
+	clearScreen: false,
+	plugins: [sveltekit()],
+	server: {
+		fs: {
+			allow: [path.resolve('../../../src')]
+		}
+	},
+	optimizeDeps: {
+		exclude: ['svelte']
+	}
+};
+
+export default config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { config as default } from '../../utils.js';