sveltejs/kit · error · Error

Cannot call `fetch` eagerly during server-side rendering wit

Error message

Cannot call `fetch` eagerly during server-side rendering with relative URL (${info}) — put your `fetch` calls inside `onMount` or a `load` function instead

What it means

In dev, SvelteKit replaces `globalThis.fetch` during SSR with a wrapper that rejects relative-URL fetches executed eagerly at module top level (outside load/onMount), because there is no request context to resolve the URL against. A relative-URL call throws; even absolute-URL eager fetches produce a console warning.

Source

Thrown at packages/kit/src/runtime/server/page/render.js:231

						}

						error = handled;
						props.page.error = error;
						props.page.status = status = error.status;

						return error;
					}
				: undefined
		};

		const fetch = globalThis.fetch;

		try {
			if (DEV) {
				let warned = false;
				globalThis.fetch = (info, init) => {
					if (typeof info === 'string' && !SCHEME.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 && !try_get_request_store()?.state.is_in_remote_function) {
						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);
				};
			}

			rendered = await with_request_store({ event, state: render_state }, async () => {
				return render(Root, { ...render_opts, props });
			});

			if (rendered.hashes) {

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Move the fetch call inside a `load` function or a remote function so it runs with request context
2. Move client-side fetches into `onMount` or an event handler
3. Use an absolute URL if the eager fetch is genuinely intentional on the server

Example fix

// before: module scope
export const data = fetch('/api/items').then((r) => r.json());
// after
export async function load({ fetch }) {
  const items = await fetch('/api/items').then((r) => r.json());
  return { items };
}

if (typeof window === 'undefined' && !isInLoadContext()) {
  throw new Error('move this fetch into load or onMount');
}

When it happens

Trigger: A module executes `fetch('/api/data')` at import time or module scope (not inside load, a remote function, or onMount), and the code path runs during server-side rendering in dev mode where `SCHEME.test(info)` fails for relative URLs.

Common situations: API clients instantiated at module level that prefetch data; libraries with side-effect fetches on import; moving fetch code out of a load function into a shared module without preserving call timing.

Related errors

• Cannot use relative URL (${info}) with global fetch — use `e
• Failed to get response header "set-cookie" — it must be incl
• Loading ${url} using `window.fetch`. For best results, use t
• Avoid calling `fetch` eagerly during server-side rendering —
• Cannot access cloudflare:workers in a prerenderable route

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