sveltejs/svelte · error · Error

props_invalid_value

props_invalid_value

Error message

props_invalid_value
Cannot do `bind:${key}={undefined}` when `${key}` has a fallback value
https://svelte.dev/e/props_invalid_value

What it means

Thrown at reactivity/props.js:329 during a two-way bind initialisation in runes mode when the bound prop value is undefined but the prop declares a fallback. Svelte cannot reconcile `bind:x={undefined}` with a fallback default because the fallback would write back, creating ambiguity about whether the parent or the fallback owns the value; in runes mode this is treated as a programming error.

Source

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

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

/**
 * Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
 * @param {string} key
 * @returns {never}
 */
export function props_invalid_value(key) {
	if (DEV) {
		const error = new Error(`props_invalid_value\nCannot do \`bind:${key}={undefined}\` when \`${key}\` has a fallback value\nhttps://svelte.dev/e/props_invalid_value`);

		error.name = 'Svelte error';

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

/**
 * Rest element properties of `$props()` such as `%property%` are readonly
 * @param {string} property
 * @returns {never}
 */
export function props_rest_readonly(property) {
	if (DEV) {
		const error = new Error(`props_rest_readonly\nRest element properties of \`$props()\` such as \`${property}\` are readonly\nhttps://svelte.dev/e/props_rest_readonly`);

		error.name = 'Svelte error';

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

View on GitHub (pinned to 20b341f100)

Solutions

Initialise the bound variable on the parent side so it is never undefined: `let value = $state('')` instead of `let value`.
Remove the fallback from the child prop declaration if undefined is a valid bound value.
Use a plain prop (not bind) if the parent truly owns the value and undefined is meaningful.

Example fix

// before
// parent
let name; // undefined
<Child bind:value={name} />
// child
let { value = 'default' } = $props();

// after — initialise on the parent
let name = $state('');
<Child bind:value={name} />

Defensive patterns

Strategy: validation

Validate before calling

// Initialise bound state variables before binding them to props with fallbacks.
// parent: let value = $state(''); // not undefined
// <Child bind:value={value} />
// child: let { value = 'default' } = $props();

Prevention

Always initialise $state variables used in two-way bindings to a non-undefined value.
If undefined must be a valid bound value, remove the fallback from the child's prop declaration.
When adding a fallback default to a prop, audit existing callers that bind to it.

When it happens

Trigger: A parent does `bind:value={someVar}` where someVar is undefined, and the child component declares `let { value = 'default' } = $props()` (a fallback). The guard at props.js:325-331 fires when initial_value===undefined, fallback!==undefined, and runes is true.

Common situations: Binding to a state variable before it is initialised; binding form inputs to optional fields that may be undefined; refactoring a component to add a default and breaking existing callers that bind undefined.

Related errors

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