sveltejs/svelte · error · Error

effect_pending_outside_reaction

effect_pending_outside_reaction

Error message

effect_pending_outside_reaction
`$effect.pending()` can only be called inside an effect or derived
https://svelte.dev/e/effect_pending_outside_reaction

What it means

Thrown by the pending() function in dom/blocks/boundary.js:548 when $effect.pending() is called and active_effect is null. $effect.pending() reports how many effects are outstanding within the nearest error boundary, so it can only meaningfully run while inside an effect or derived that belongs to a boundary.

Source

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

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

/**
 * `$effect.pending()` can only be called inside an effect or derived
 * @returns {never}
 */
export function effect_pending_outside_reaction() {
	if (DEV) {
		const error = new Error(`effect_pending_outside_reaction\n\`$effect.pending()\` can only be called inside an effect or derived\nhttps://svelte.dev/e/effect_pending_outside_reaction`);

		error.name = 'Svelte error';

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

/**
 * Maximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state
 * @returns {never}
 */
export function effect_update_depth_exceeded() {
	if (DEV) {
		const error = new Error(`effect_update_depth_exceeded\nMaximum update depth exceeded. This typically indicates that an effect reads and writes the same piece of state\nhttps://svelte.dev/e/effect_update_depth_exceeded`);

		error.name = 'Svelte error';

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

View on GitHub (pinned to 20b341f100)

Solutions

1. Only call $effect.pending() from inside a $effect, $derived, or component template expression.
2. If you need a global 'are effects pending' indicator, expose it from a component via a prop or store rather than calling the rune externally.
3. Wrap the call site so it runs within component initialisation.

Example fix

// before
export function logPending() {
  console.log($effect.pending()); // no active effect
}

// after
<script>
  $effect(() => {
    console.log($effect.pending()); // inside an effect
  });
</script>

// $effect.pending() requires an active effect. Guard by only calling it inside one.
// If exposing a pending count, do so from inside an effect:
// <script>
//   let pendingCount = $state(0);
//   $effect(() => { pendingCount = $effect.pending(); });
// </script>

When it happens

Trigger: Calling $effect.pending() in module scope, in a plain event handler outside any component, or in a non-reactive callback. The guard at boundary.js:546-549 fires because active_effect===null.

Common situations: Reading $effect.pending() in a utility function invoked outside a component; using it in a plain .js file; calling it after the component unmounted; polling logic moved out of a component.

Related errors

• effect_in_unowned_derived
• effect_orphan
• effect_update_depth_exceeded
• flush_sync_in_effect
• get_abort_signal_outside_reaction

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