sveltejs/kit · warning

The next HMR update will cause the page to reload

Error message

The next HMR update will cause the page to reload

What it means

In dev, when an error occurs during navigation/update that is not an app-level error handled by the app's error page (caught.kind !== 'app'), SvelteKit sets an `errored` flag and logs this warning: the next Hot Module Replacement update will force a full page reload to recover from the broken state.

Source

Thrown at packages/kit/src/runtime/client/client.js:2541

export async function handle_error(error, event) {
	if (error instanceof HandledHttpError) {
		return error.body;
	}

	/** @type {import('@sveltejs/kit/hooks').ClientCaughtError} */
	let caught;

	if (error instanceof HttpError) {
		caught = { kind: 'app', error: error.body };
	} else if (error instanceof SvelteKitError) {
		caught = { kind: 'framework', error: { status: error.status, message: error.text } };
	} else {
		caught = { kind: 'unknown', error };
	}

	if (DEV && caught.kind !== 'app') {
		errored = true;
		console.warn('The next HMR update will cause the page to reload');
	}

	const fallback =
		caught.kind === 'unknown' ? { status: 500, message: 'Internal Error' } : caught.error;

	const input = { ...caught, event };
	if (DEV) add_deprecated_handle_error_properties(input, fallback);

	const app_error = await app.hooks.handleError(input);

	// the hook returns only the properties it wants to override; anything it omits
	// (including by returning nothing at all) is inherited from the caught error
	return { ...fallback, ...app_error };
}

/**
 * @template {Function} T
 * @param {Set<T>} callbacks

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Fix the runtime error reported above this warning so the app renders successfully.
2. Reload the page manually to clear the errored state before expecting HMR to work.
3. Throw a typed SvelteKit error (error(...) from @sveltejs/kit) and handle it via +error.svelte so it counts as an app error.

Example fix

// before: uncaught throw in load
throw new Error('boom');
// after
import { error } from '@sveltejs/kit';
throw error(500, 'boom'); // handled by +error.svelte, avoids forced reload

When it happens

Trigger: An uncaught error (e.g. thrown in a load function outside app handling, or an unknown error during client-side rendering) while running `vite dev`; any subsequent HMR file change reloads the whole page instead of hot-swapping.

Common situations: Developers notice the dev server doing full reloads after editing files and see this warning earlier in the console — the app got into an errored state from a runtime error during navigation.

Related errors

• Could not find node for ${url}
• Preloading data for ${intent.url.pathname} failed with the f
• HTTP error status codes must be between 400 and 599 — ${stat
• Error: ${status}
• ${manifest_data.params} does not export `params` from `defin

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