sveltejs/svelte · error · Error

bind_invalid_export

bind_invalid_export

Error message

bind_invalid_export
Component ${component} has an export named `${key}` that a consumer component is trying to access using `bind:${key}`, which is disallowed. Instead, use `bind:this` (e.g. `<${name} bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.${key}`)
https://svelte.dev/e/bind_invalid_export

What it means

Runtime error `bind_invalid_export`: a consumer used `bind:someKey` on a child component whose `someKey` is a plain export (not a `$bindable()` prop). Svelte 5 only allows two-way binding on props explicitly declared bindable. The message identifies the offending component, key, and tag name, and points to `bind:this` as the escape hatch for non-bindable members.

Source

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

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

/**
 * Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)
 * @param {string} component
 * @param {string} key
 * @param {string} name
 * @returns {never}
 */
export function bind_invalid_export(component, key, name) {
	if (DEV) {
		const error = new Error(`bind_invalid_export\nComponent ${component} has an export named \`${key}\` that a consumer component is trying to access using \`bind:${key}\`, which is disallowed. Instead, use \`bind:this\` (e.g. \`<${name} bind:this={component} />\`) and then access the property on the bound component instance (e.g. \`component.${key}\`)\nhttps://svelte.dev/e/bind_invalid_export`);

		error.name = 'Svelte error';

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

/**
 * A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`
 * @param {string} key
 * @param {string} component
 * @param {string} name
 * @returns {never}
 */
export function bind_not_bindable(key, component, name) {
	if (DEV) {
		const error = new Error(`bind_not_bindable\nA component is attempting to bind to a non-bindable property \`${key}\` belonging to ${component} (i.e. \`<${name} bind:${key}={...}>\`). To mark a property as bindable: \`let { ${key} = $bindable() } = $props()\`\nhttps://svelte.dev/e/bind_not_bindable`);

		error.name = 'Svelte error';

View on GitHub (pinned to 20b341f100)

Solutions

1. Mark the prop bindable in the child: `let { count = $bindable() } = $props()`.
2. If two-way binding is not actually needed, drop `bind:` from the consumer and pass the prop one-way.
3. For accessing non-bindable instance members, use `bind:this` and read the property off the instance.

Example fix

// before (Child.svelte)
<script>
  let { count } = $props();
</script>
<!-- consumer -->
<Child bind:count={n} />

// after
<script>
  let { count = $bindable() } = $props();
</script>
<Child bind:count={n} />

// Inspect the child component's source for $bindable on the bound key.
function isPropBindable(childSource, key) {
  const re = new RegExp(`\\b${key}\\s*=\\s*\\$bindable`);
  return re.test(childSource);
}

When it happens

Trigger: At runtime (DEV) when Svelte sets up bindings and finds `bind:foo` against a component whose `foo` export is not declared with `$bindable()`. E.g. `<Child bind:count={n}/>` where `Child` declares `let { count } = $props()` without `$bindable()`.

Common situations: Migrating Svelte 4 `export let count` (implicitly bindable) to Svelte 5 `$props()` and forgetting `$bindable()`. Mixing one-way configuration props with two-way bound ones.

Related errors

• bind_not_bindable
• bind_invalid_checkbox_value
• component_api_changed
• component_api_invalid_new
• Encountered an export declaration pattern that is not suppor

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