sveltejs/svelte · error · Error

component_api_invalid_new

component_api_invalid_new

Error message

component_api_invalid_new
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.
https://svelte.dev/e/component_api_invalid_new

What it means

Runtime error `component_api_invalid_new`: Svelte 5 components are no longer instantiable with `new Component(...)`. Components are functions; instantiation is done by rendering them (or by calling `mount`/`hydrate` from `svelte`). The message names the component and suggests `compatibility.componentApi: '4'` as a fallback for components outside your control.

Source

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

		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`);
	}
}

/**
 * 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`);
	}
}

View on GitHub (pinned to 20b341f100)

Solutions

1. Use `import { mount } from 'svelte'; mount(MyComponent, { target, props })` for client rendering.
2. Use `import { hydrate } from 'svelte'` for SSR hydration.
3. For third-party components you cannot change, set `compatibility.componentApi: '4'` in the compiler options.

Example fix

// before
import MyComponent from './MyComponent.svelte';
const c = new MyComponent({ target: document.body, props: { x: 1 } });

// after
import { mount } from 'svelte';
import MyComponent from './MyComponent.svelte';
const c = mount(MyComponent, { target: document.body, props: { x: 1 } });

When it happens

Trigger: At runtime (DEV) when code does `const c = new MyComponent({ target, props })` against a Svelte 5 component.

Common situations: Migrating code that programmatically mounts components (modals, toasts, dynamic widgets) using the Svelte 4 `new` constructor API. Test harnesses and dynamic-rendering helpers are the most common offenders.

Related errors

• component_api_changed
• 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/ab968af91aa76ab8. Report an issue: GitHub.