{"record":{"id":"ab968af91aa76ab8","repo":"sveltejs/svelte","slug":"component-api-invalid-new","errorCode":"component_api_invalid_new","errorMessage":"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","messagePattern":"component_api_invalid_new\nAttempted to instantiate (.+?) with `new (.+?)`, 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","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/svelte/src/internal/client/errors.js","lineNumber":109,"sourceCode":"\t\tthrow new Error(`https://svelte.dev/e/component_api_changed`);\n\t}\n}\n\n/**\n * 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.\n * @param {string} component\n * @param {string} name\n * @returns {never}\n */\nexport function component_api_invalid_new(component, name) {\n\tif (DEV) {\n\t\tconst 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`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/component_api_invalid_new`);\n\t}\n}\n\n/**\n * A derived value cannot reference itself recursively\n * @returns {never}\n */\nexport function derived_references_self() {\n\tif (DEV) {\n\t\tconst error = new Error(`derived_references_self\\nA derived value cannot reference itself recursively\\nhttps://svelte.dev/e/derived_references_self`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/derived_references_self`);\n\t}\n}","sourceCodeStart":91,"sourceCodeEnd":127,"githubUrl":"https://github.com/sveltejs/svelte/blob/20b341f10048cf1016a2028ac7eee5595cfef6a5/packages/svelte/src/internal/client/errors.js#L91-L127","documentation":"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.","triggerScenarios":"At runtime (DEV) when code does `const c = new MyComponent({ target, props })` against a Svelte 5 component.","commonSituations":"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.","solutions":["Use `import { mount } from 'svelte'; mount(MyComponent, { target, props })` for client rendering.","Use `import { hydrate } from 'svelte'` for SSR hydration.","For third-party components you cannot change, set `compatibility.componentApi: '4'` in the compiler options."],"exampleFix":"// before\nimport MyComponent from './MyComponent.svelte';\nconst c = new MyComponent({ target: document.body, props: { x: 1 } });\n\n// after\nimport { mount } from 'svelte';\nimport MyComponent from './MyComponent.svelte';\nconst c = mount(MyComponent, { target: document.body, props: { x: 1 } });","handlingStrategy":"fallback","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use `mount(Component, { target, props })` from `svelte` for programmatic mounting.","Use `hydrate(...)` for SSR hydration.","Set `compatibility.componentApi: '4'` for third-party components you cannot change."],"tags":["svelte5","runtime","component-api","mount","migration"],"backgroundTag":null,"analyzedSha":"20b341f10048cf1016a2028ac7eee5595cfef6a5","analyzedAt":"2026-08-12T23:37:30.399Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}