sveltejs/svelte · error · Error

component_api_changed

component_api_changed

Error message

component_api_changed
Calling `${method}` on a component instance (of ${component}) is no longer valid in Svelte 5
https://svelte.dev/e/component_api_changed

What it means

Runtime error `component_api_changed`: the Svelte 4 component-instance API methods (`$set`, `$on`, `$destroy`, and accessing impulsive state directly on the instance) were removed in Svelte 5. Calling any of them throws. The message names the offending method and component. In runes mode, components are not class-like instances with imperative APIs.

Source

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

		throw new Error(`https://svelte.dev/e/bind_not_bindable`);
	}
}

/**
 * Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5
 * @param {string} method
 * @param {string} component
 * @returns {never}
 */
export function component_api_changed(method, component) {
	if (DEV) {
		const error = new Error(`component_api_changed\nCalling \`${method}\` on a component instance (of ${component}) is no longer valid in Svelte 5\nhttps://svelte.dev/e/component_api_changed`);

		error.name = 'Svelte error';

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

/**
 * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.
 * @param {string} component
 * @param {string} name
 * @returns {never}
 */
export function component_api_invalid_new(component, name) {
	if (DEV) {
		const error = new Error(`component_api_invalid_new\nAttempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`compatibility.componentApi\` compiler option to \`4\` to keep it working.\nhttps://svelte.dev/e/component_api_invalid_new`);

		error.name = 'Svelte error';

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

View on GitHub (pinned to 20b341f100)

Solutions

1. Replace `$set({x: 1})` with props: pass `x` reactively from the parent and let the child read it.
2. Replace `$on('event', cb)` with callback props: `let { onevent } = $props()` and have the child invoke it.
3. For third-party code you cannot change, set the compiler option `compatibility.componentApi: '4'` to keep the legacy instance API working.

Example fix

// before
<script>
  let comp;
</script>
<Child bind:this={comp} />
<button on:click={() => comp.$set({ open: true })}>Open</button>

// after
<script>
  let open = $state(false);
</script>
<Child {open} />
<button onclick={() => open = true}>Open</button>

When it happens

Trigger: At runtime (DEV) when consumer code does something like `comp.$set({x: 1})`, `comp.$on('event', cb)`, or `comp.$destroy()` on a Svelte 5 component instance obtained via `bind:this`.

Common situations: Migrating a codebase that drove components imperatively from outside (e.g. test utilities calling `$set`, third-party integration layers using `$on`), or upgrading a dependency that still uses the Svelte 4 instance API against your Svelte 5 components.

Related errors

• component_api_invalid_new
• bind_invalid_export
• 'svelte/compiler' no longer exports a `walk` utility — pleas
• migrating this component would require adding a `$${rune}` r
• Can't migrate code with ${illegal_specifiers.join(' and ')}.

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