error in dev mode if global fetch is used with relative URL (#8370)

* error in dev mode if global fetch is used with relative URL - closes #7976

* Update packages/kit/src/exports/vite/dev/index.js

Co-authored-by: Rich Harris <[email protected]>

Co-authored-by: Simon H <[email protected]>

Author: Rich-Harris

.changeset/cuddly-cows-vanish.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Error in dev mode if global `fetch` is used with relative URL

documentation/docs/10-getting-started/40-web-standards.md

@@ -12,7 +12,7 @@ In particular, you'll get comfortable with the following:
 
 SvelteKit uses [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) for getting data from the network. It's available in [hooks](/docs/hooks) and [server routes](/docs/routing#server) as well as in the browser.
 
-> A special version of `fetch` is available in [`load`](/docs/load) functions for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials. (To make credentialled fetches in server-side code outside `load`, you must explicitly pass `cookie` and/or `authorization` headers.) It also allows you to make relative requests, whereas server-side `fetch` normally requires a fully qualified URL.
+> A special version of `fetch` is available in [`load`](/docs/load) functions, [server hooks](/docs/hooks#server-hooks) and [API routes](/docs/routing#server) for invoking endpoints directly during server-side rendering, without making an HTTP call, while preserving credentials. (To make credentialled fetches in server-side code outside `load`, you must explicitly pass `cookie` and/or `authorization` headers.) It also allows you to make relative requests, whereas server-side `fetch` normally requires a fully qualified URL.
 
 Besides `fetch` itself, the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) includes the following interfaces:
 

packages/kit/src/exports/vite/dev/index.js

@@ -29,6 +29,17 @@ export async function dev(vite, vite_config, svelte_config) {
 		installPolyfills();
 	}
 
+	const fetch = globalThis.fetch;
+	globalThis.fetch = (info, init) => {
+		if (typeof info === 'string' && !/^\w+:\/\//.test(info)) {
+			throw new Error(
+				`Cannot use relative URL (${info}) with global fetch — use \`event.fetch\` instead: https://kit.svelte.dev/docs/web-standards#fetch-apis`
+			);
+		}
+
+		return fetch(info, init);
+	};
+
 	sync.init(svelte_config, vite_config.mode);
 
 	/** @type {import('types').Respond} */