sveltejs/svelte · error · Error

derived_references_self

derived_references_self

Error message

derived_references_self
A derived value cannot reference itself recursively
https://svelte.dev/e/derived_references_self

What it means

Runtime error `derived_references_self`: a `$derived(...)` expression reads its own result during its own computation, which would create an infinite loop (the derived depends on itself). Svelte detects the cycle and throws immediately rather than spinning.

Source

Thrown at packages/svelte/src/internal/client/errors.js:125

		throw error;
	} else {
		throw new Error(`https://svelte.dev/e/component_api_invalid_new`);
	}
}

/**
 * A derived value cannot reference itself recursively
 * @returns {never}
 */
export function derived_references_self() {
	if (DEV) {
		const error = new Error(`derived_references_self\nA derived value cannot reference itself recursively\nhttps://svelte.dev/e/derived_references_self`);

		error.name = 'Svelte error';

		throw error;
	} else {
		throw new Error(`https://svelte.dev/e/derived_references_self`);
	}
}

/**
 * Keyed each block has duplicate key `%value%` at indexes %a% and %b%
 * @param {string} a
 * @param {string} b
 * @param {string | undefined | null} [value]
 * @returns {never}
 */
export function each_key_duplicate(a, b, value) {
	if (DEV) {
		const error = new Error(`each_key_duplicate\n${value
			? `Keyed each block has duplicate key \`${value}\` at indexes ${a} and ${b}`
			: `Keyed each block has duplicate key at indexes ${a} and ${b}`}\nhttps://svelte.dev/e/each_key_duplicate`);

		error.name = 'Svelte error';

View on GitHub (pinned to 20b341f100)

Solutions

1. Break the cycle: introduce a separate `$state` input and a `$derived` that reads it without self-reference.
2. If you need accumulation, use an `$effect` that reads and writes a `$state` (not a `$derived`).
3. Rename the derived binding so its initializer does not close over the same name.

Example fix

// before
let total = $derived(total + delta);

// after
let delta = $state(1);
let total = $state(0);
$effect(() => { total += delta; });

// Detect self-referential $derived expressions.
function selfReferentialDerived(source) {
  return /\b(let|const)\s+(\w+)\s*=\s*\$derived\([\s\S]*?\b\2\b/.test(source);
}

When it happens

Trigger: At runtime (DEV) when a `$derived` body references the variable it is being assigned to, e.g. `let x = $derived(x + 1)` or transitively through a function called from the derived that closes over the same binding.

Common situations: Refactoring reactive statements (`$: x = x + 1` — itself a smell) into runes; recursive computations written without a base case; derived bodies that read a state variable they then assign via an `$effect`.

Related errors

• async_derived_orphan
• bind_invalid_checkbox_value
• bind_invalid_export
• bind_not_bindable
• component_api_changed

AI-assisted analysis of sveltejs/svelte@20b341f100 (2026-08-12). Data as JSON: /api/errors/461cc17ff2297be8. Report an issue: GitHub.