[breaking] throw an error if load return value isn't a POJO

.changeset/light-lamps-crash.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] throw an error on invalid load response

packages/kit/src/runtime/client/client.js

@@ -673,10 +673,23 @@ export function create_client({ target, base }) {
 				}
 			});
 
-			if (import.meta.env.DEV) {
+			if (__SVELTEKIT_DEV__) {
 				try {
 					lock_fetch();
 					data = (await node.shared.load.call(null, load_input)) ?? null;
+					if (data != null && Object.getPrototypeOf(data) !== Object.prototype) {
+						throw new Error(
+							`a load function related to route '${route.id}' returned ${
+								typeof data !== 'object'
+									? `a ${typeof data}`
+									: data instanceof Response
+									? 'a Response object'
+									: Array.isArray(data)
+									? 'an array'
+									: 'a non-plain object'
+							}, but must return a plain object at the top level (i.e. \`return {...}\`)`
+						);
+					}
 				} finally {
 					unlock_fetch();
 				}
@@ -1298,7 +1311,7 @@ export function create_client({ target, base }) {
 		},
 
 		disable_scroll_handling: () => {
-			if (import.meta.env.DEV && started && !updating) {
+			if (__SVELTEKIT_DEV__ && started && !updating) {
 				throw new Error('Can only disable scroll handling during navigation');
 			}
 

packages/kit/src/runtime/server/data/index.js

@@ -55,6 +55,7 @@ export async function render_data(
 					const node = n == undefined ? n : await options.manifest._.nodes[n]();
 					return load_server_data({
 						event: new_event,
+						options,
 						state,
 						node,
 						parent: async () => {

packages/kit/src/runtime/server/page/index.js

@@ -139,6 +139,7 @@ export async function render_page(event, route, page, options, state, resolve_op
 
 					return await load_server_data({
 						event,
+						options,
 						state,
 						node,
 						parent: async () => {

packages/kit/src/runtime/server/page/load_data.js

@@ -5,13 +5,14 @@ import { unwrap_promises } from '../../../utils/promises.js';
  * Calls the user's server `load` function.
  * @param {{
  *   event: import('types').RequestEvent;
+ *   options: import('types').SSROptions;
  *   state: import('types').SSRState;
  *   node: import('types').SSRNode | undefined;
  *   parent: () => Promise<Record<string, any>>;
  * }} opts
  * @returns {Promise<import('types').ServerDataNode | null>}
  */
-export async function load_server_data({ event, state, node, parent }) {
+export async function load_server_data({ event, options, state, node, parent }) {
 	if (!node?.server) return null;
 
 	const uses = {
@@ -59,6 +60,9 @@ export async function load_server_data({ event, state, node, parent }) {
 	});
 
 	const data = result ? await unwrap_promises(result) : null;
+	if (options.dev) {
+		validate_load_response(data, /** @type {string} */ (event.route.id));
+	}
 
 	return {
 		type: 'data',
@@ -236,9 +240,10 @@ export async function load_data({
 		}
 	});
 
-	const data = await node.shared.load.call(null, load_event);
-
-	return data ? unwrap_promises(data) : null;
+	const result = await node.shared.load.call(null, load_event);
+	const data = result ? await unwrap_promises(result) : null;
+	validate_load_response(data, /** @type {string} */ (event.route.id));
+	return data;
 }
 
 /**
@@ -257,3 +262,23 @@ async function stream_to_string(stream) {
 	}
 	return result;
 }
+
+/**
+ * @param {any} data
+ * @param {string} [routeId]
+ */
+function validate_load_response(data, routeId) {
+	if (data != null && Object.getPrototypeOf(data) !== Object.prototype) {
+		throw new Error(
+			`a load function related to route '${routeId}' returned ${
+				typeof data !== 'object'
+					? `a ${typeof data}`
+					: data instanceof Response
+					? 'a Response object'
+					: Array.isArray(data)
+					? 'an array'
+					: 'a non-plain object'
+			}, but must return a plain object at the top level (i.e. \`return {...}\`)`
+		);
+	}
+}

packages/kit/src/runtime/server/page/respond_with_error.js

@@ -40,6 +40,7 @@ export async function respond_with_error({ event, options, state, status, error,
 
 			const server_data_promise = load_server_data({
 				event,
+				options,
 				state,
 				node: default_layout,
 				parent: async () => ({})

packages/kit/test/apps/basics/src/routes/errors/invalid-load-response/+page.js

@@ -0,0 +1,3 @@
+export function load() {
+	return ['nope'];
+}

packages/kit/test/apps/basics/src/routes/errors/invalid-load-response/+page.svelte

@@ -0,0 +1 @@
+<!-- this will never be rendered, load function returns something invalid -->

packages/kit/test/apps/basics/src/routes/errors/invalid-server-load-response/+page.server.js

@@ -0,0 +1,3 @@
+export function load() {
+	return ['nope'];
+}

packages/kit/test/apps/basics/src/routes/errors/invalid-server-load-response/+page.svelte

@@ -0,0 +1 @@
+<!-- this will never be rendered, load function returns something invalid -->

packages/kit/test/apps/basics/test/test.js

@@ -421,6 +421,38 @@ test.describe('Errors', () => {
 				'This is your custom error page saying: "Crashing now"'
 			);
 		});
+
+		test('errors on invalid load function response', async ({ page, app, javaScriptEnabled }) => {
+			if (javaScriptEnabled) {
+				await page.goto('/');
+				await app.goto('/errors/invalid-load-response');
+			} else {
+				await page.goto('/errors/invalid-load-response');
+			}
+
+			expect(await page.textContent('footer')).toBe('Custom layout');
+			expect(await page.textContent('#message')).toBe(
+				"This is your custom error page saying: \"a load function related to route '/errors/invalid-load-response' returned an array, but must return a plain object at the top level (i.e. `return {...}`)\""
+			);
+		});
+
+		test('errors on invalid server load function response', async ({
+			page,
+			app,
+			javaScriptEnabled
+		}) => {
+			if (javaScriptEnabled) {
+				await page.goto('/');
+				await app.goto('/errors/invalid-server-load-response');
+			} else {
+				await page.goto('/errors/invalid-server-load-response');
+			}
+
+			expect(await page.textContent('footer')).toBe('Custom layout');
+			expect(await page.textContent('#message')).toBe(
+				"This is your custom error page saying: \"a load function related to route '/errors/invalid-server-load-response' returned an array, but must return a plain object at the top level (i.e. `return {...}`)\""
+			);
+		});
 	}
 
 	test('server-side load errors', async ({ page }) => {