[fix] deeply-nested error components render right

Under some circumstances, a deeply-nested error component could render
with a layout from a parent folder instead of the layout from the error
component's own folder. This commit fixes that bug, so that error
components are correctly matched up with layout components in the same
folder even when deeply nested.

.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>