[fix] deeply-nested error component rendering (#2389)

.changeset/empty-poets-check.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] deeply-nested error components render with correct layout

packages/kit/src/core/create_manifest_data/index.js

@@ -220,23 +220,24 @@ export default function create_manifest_data({ config, output, cwd = process.cwd
 				components.push(item.file);
 
 				const concatenated = layout_stack.concat(item.file);
+				const errors = error_stack.slice();
 
 				const pattern = get_pattern(segments, true);
 
 				let i = concatenated.length;
 				while (i--) {
-					if (!error_stack[i] && !concatenated[i]) {
-						error_stack.splice(i, 1);
+					if (!errors[i] && !concatenated[i]) {
+						errors.splice(i, 1);
 						concatenated.splice(i, 1);
 					}
 				}
 
-				i = error_stack.length;
+				i = errors.length;
 				while (i--) {
-					if (error_stack[i]) break;
+					if (errors[i]) break;
 				}
 
-				error_stack.splice(i + 1);
+				errors.splice(i + 1);
 
 				const path = segments.every((segment) => segment.length === 1 && !segment[0].dynamic)
 					? `/${segments.map((segment) => segment[0].content).join('/')}`
@@ -248,7 +249,7 @@ export default function create_manifest_data({ config, output, cwd = process.cwd
 					params,
 					path,
 					a: /** @type {string[]} */ (concatenated),
-					b: /** @type {string[]} */ (error_stack)
+					b: /** @type {string[]} */ (errors)
 				});
 			} else {
 				const pattern = get_pattern(segments, !item.route_suffix);

packages/kit/test/apps/basics/src/routes/nested-layout/_tests.js

@@ -32,4 +32,16 @@ export default function (test) {
 			assert.equal(await page.textContent('h1'), '500');
 		}
 	);
+
+	test(
+		'renders deeply-nested errors in the right layout',
+		'/nested-layout/foo/bar/nope',
+		async ({ page }) => {
+			assert.equal(await page.textContent('footer'), 'Custom layout');
+			assert.ok(await page.evaluate(() => document.querySelector('p#nested')));
+			assert.ok(await page.evaluate(() => document.querySelector('p#nested-foo')));
+			assert.ok(await page.evaluate(() => document.querySelector('p#nested-bar')));
+			assert.equal(await page.textContent('#nested-error-message'), 'error.message: nope');
+		}
+	);
 }

packages/kit/test/apps/basics/src/routes/nested-layout/foo/__layout.svelte

@@ -0,0 +1,2 @@
+<slot></slot>
+<p id="nested-foo">Nested layout foo</p>

packages/kit/test/apps/basics/src/routes/nested-layout/foo/bar/__error.svelte

@@ -0,0 +1,34 @@
+<script context="module">
+	/** @type {import('@sveltejs/kit').ErrorLoad} */
+	export async function load({ status, error }) {
+		return {
+			props: {
+				answer: 42,
+				status,
+				error
+			}
+		};
+	}
+</script>
+
+<script>
+	/** @type {number} */
+	export let status;
+
+	/** @type {Error} */
+	export let error;
+
+	/** @type {number} */
+	export let answer;
+</script>
+
+<h1>Nested error page</h1>
+<p id="nested-error-status">status: {status}</p>
+<p id="nested-error-message">error.message: {error && error.message}</p>
+<p id="nested-error-loaded">answer: {answer}</p>
+
+<style>
+	h1 {
+		color: blue;
+	}
+</style>

packages/kit/test/apps/basics/src/routes/nested-layout/foo/bar/__layout.svelte

@@ -0,0 +1,2 @@
+<slot></slot>
+<p id="nested-bar">Nested layout bar</p>

packages/kit/test/apps/basics/src/routes/nested-layout/foo/bar/nope.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+	export async function load() {
+		throw new Error('nope');
+	}
+</script>
+
+<h1>should not see this</h1>

packages/kit/test/apps/basics/src/routes/nested-layout/foo/baz.svelte

@@ -0,0 +1 @@
+<p id="baz">baz</p>