sveltejs/kit · warning

Loading ${url} using `window.fetch`. For best results, use t

Error message

Loading ${url} using `window.fetch`. For best results, use the `fetch` that is passed to your `load` function: https://svelte.dev/docs/kit/load#making-fetch-requests

What it means

During a `load` run, SvelteKit detects that a fetch was made with the global `window.fetch` rather than the specialized `fetch` passed to `load`. The kit fetch enables request memoization, dependency tracking, and forwarding of cookies/headers, so plain window.fetch yields worse performance and possibly duplicated or unauthenticated requests. This DEV warning fires once when the heuristic detects a non-kit fetch inside load.

Source

Thrown at packages/kit/src/runtime/client/fetcher.js:54

		// We use just the filename as the method name sometimes does not appear on the CI.
		const url = input instanceof Request ? input.url : input.toString();
		const stack_array = /** @type {string} */ (new Error().stack).split('\n');
		// We need to do a cutoff because Safari and Firefox maintain the stack
		// across events and for example traces a `fetch` call triggered from a button
		// back to the creation of the event listener and the element creation itself,
		// where at some point client.js will show up, leading to false positives.
		const cutoff = stack_array.findIndex((a) => a.includes('load@') || a.includes('at load'));
		const stack = stack_array.slice(0, cutoff + 2).join('\n');

		const in_load_heuristic = can_inspect_stack_trace
			? stack.includes('src/runtime/client/client.js')
			: loading;

		// This flag is set in initial_fetch and subsequent_fetch
		const used_kit_fetch = init?.__sveltekit_fetch__;

		if (in_load_heuristic && !used_kit_fetch) {
			console.warn(
				`Loading ${url} using \`window.fetch\`. For best results, use the \`fetch\` that is passed to your \`load\` function: https://svelte.dev/docs/kit/load#making-fetch-requests`
			);
		}

		const method = input instanceof Request ? input.method : init?.method || 'GET';

		if (method !== 'GET') {
			cache.delete(build_selector(requested_url(input)));
		}

		return native_fetch(input, init);
	};
} else {
	window.fetch = (input, init) => {
		const method = input instanceof Request ? input.method : init?.method || 'GET';

		if (method !== 'GET') {
			cache.delete(build_selector(requested_url(input)));

View on GitHub (pinned to 03f1687fe6)

Solutions

  1. Use the `fetch` passed to `load`: `({ fetch }) => { ... }` and pass it into helpers/clients
  2. If using a library like axios, configure its fetch/adapter to use the load-provided fetch
  3. Suppress only if the native fetch behavior is intentional and understood

Example fix

// before
export async function load() {
  const res = await window.fetch('/api/data');
  return { data: await res.json() };
}
// after
export async function load({ fetch }) {
  const res = await fetch('/api/data');
  return { data: await res.json() };
}
Defensive patterns

Strategy: validation

Validate before calling

export async function load({ fetch }) { if (typeof window !== 'undefined' && fetch === window.fetch) console.warn('using window.fetch in load — use the provided fetch'); }

Type guard

const isKitFetch = (fetch) => typeof fetch === 'function' && fetch.__sveltekit_fetch__ === true;

Prevention

When it happens

Trigger: Inside a `load` function (or nested code during load), calling `fetch(...)` directly (module-scope reference, `globalThis.fetch`, or an imported wrapper) instead of the `fetch` argument provided by `load`, for a request that is actually executed.

Common situations: Using axios or a custom API client that captures global fetch; calling fetch in a helper that receives no fetch parameter; copy-pasted code from non-SvelteKit projects.

Related errors


AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/7e90d6cf482cdc10. Report an issue: GitHub.