sveltejs/kit · error

snapshot() was called multiple times from the same call site

Error message

snapshot() was called multiple times from the same call site. Pass a unique `id` to distinguish the instances.

What it means

In dev mode, snapshot() registers each instance by id and throws if two live component instances register the same id. When the id was inferred from the callsite this means the same callsite rendered multiple snapshot() instances; when an explicit id was supplied the variant message names the duplicate id.

Source

Thrown at packages/kit/src/runtime/client/snapshots.js:124

 */
export function snapshot(options) {
	let id = options.id;
	if (id === undefined) {
		// restore any lowered third-party limit, else every callsite collapses to one id
		const limit = Error.stackTraceLimit;
		const lowered = typeof limit === 'number' && limit < 3;
		if (lowered) Error.stackTraceLimit = 3;
		const stack = new Error().stack;
		if (lowered) Error.stackTraceLimit = limit;

		id = callsite_id(stack);
	}

	const registration = { ...options, id };

	onMount(() => {
		if (DEV && Array.from(snapshot_registrations).some((existing) => existing.id === id)) {
			throw new Error(
				options.id === undefined
					? 'snapshot() was called multiple times from the same call site. Pass a unique `id` to distinguish the instances.'
					: `A snapshot with id "${options.id}" is already registered. Pass a unique \`id\`.`
			);
		}

		const index = get_idle_history_index();
		if (index !== null) {
			const values = navigation_snapshots[index];
			if (values && Object.hasOwn(values, id)) {
				registration.restore(parse(values[id]));
			}
		}

		snapshot_registrations.add(registration);

		return () => {
			snapshot_registrations.delete(registration);

View on GitHub (pinned to 03f1687fe6)

Solutions

1. Give each snapshot() call a unique id, composing it from loop indices or props: snapshot({ id: `item-${item.id}` }).
2. Move snapshot() into a child component so each instance has its own callsite.
3. If instances are truly transient, ensure only one is mounted at a time.

Example fix

// before
{#each items as item}
  <Widget>{snapshot()}</Widget>
{/each}
// after
{#each items as item}
  <Widget>{snapshot({ id: `item-${item.id}` })}</Widget>
{/each}

const seen = new Set();
function uniqueSnapshotId(base) {
  let id = base, n = 1;
  while (seen.has(id)) id = `${base}-${n++}`;
  seen.add(id);
  return id;
}
// snapshot({ id: uniqueSnapshotId('widget') })

When it happens

Trigger: Rendering multiple components (or one component type twice in a list) where each calls snapshot() at the same callsite without a unique id; re-mounting logic that registers twice.

Common situations: Using snapshot() inside an {#each} loop; rendering the same component in multiple slots; conditional rendering that keeps two instances alive simultaneously.

Related errors

• use:enhance can only be used on <form> fields with method="P
• Your form contains <input type="file"> fields, but is missin
• Could not generate a snapshot id from the stack trace. Pass

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