From 930c8e4ee2e3046ed1b622777dafa23029a19fe5 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 9 Feb 2023 17:11:38 +0100
Subject: [PATCH] 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              |  5 ++++
 .../kit/src/runtime/server/page/render.js     | 27 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/five-pumpkins-join.md

diff --git a/.changeset/five-pumpkins-join.md b/.changeset/five-pumpkins-join.md
new file mode 100644
index 000000000000..17177784a85f
--- /dev/null
+++ b/.changeset/five-pumpkins-join.md
@@ -0,0 +1,5 @@
+---
+"@sveltejs/kit": patch
+---
+
+fix: provide helpful error/warning when calling `fetch` during render
diff --git a/packages/kit/src/runtime/server/page/render.js b/packages/kit/src/runtime/server/page/render.js
index ec569666cd18..12a49c4b4ecb 100644
--- a/packages/kit/src/runtime/server/page/render.js
+++ b/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) {