fix: adjust fetch error message on the server (#8551)

* fix: adjust fetch error message on the server

closes #8536

* make it possible to still use them in #await blocks

* undo #await dance

* put additional dev time check inside render.js instead

* Create five-pumpkins-join.md

* prevent corrupted state

* Delete nice-mayflies-compete.md

---------

Co-authored-by: Rich Harris <richard.a.harris@gmail.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>

.changeset/five-pumpkins-join.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: provide helpful error/warning when calling `fetch` during render

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

@@ -113,7 +113,32 @@ export async function render_response({
 			form: form_value
 		};
 
-		rendered = options.root.render(props);
+		if (__SVELTEKIT_DEV__) {
+			const fetch = globalThis.fetch;
+			let warned = false;
+			globalThis.fetch = (info, init) => {
+				if (typeof info === 'string' && !/^\w+:\/\//.test(info)) {
+					throw new Error(
+						`Cannot call \`fetch\` eagerly during server side rendering with relative URL (${info}) — put your \`fetch\` calls inside \`onMount\` or a \`load\` function instead`
+					);
+				} else if (!warned) {
+					console.warn(
+						`Avoid calling \`fetch\` eagerly during server side rendering — put your \`fetch\` calls inside \`onMount\` or a \`load\` function instead`
+					);
+					warned = true;
+				}
+
+				return fetch(info, init);
+			};
+
+			try {
+				rendered = options.root.render(props);
+			} finally {
+				globalThis.fetch = fetch;
+			}
+		} else {
+			rendered = options.root.render(props);
+		}
 
 		for (const { node } of branch) {
 			if (node.imports) {