{"record":{"id":"61cf758f99dbaeda","repo":"sveltejs/svelte","slug":"component-api-changed","errorCode":"component_api_changed","errorMessage":"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","messagePattern":"component_api_changed\nCalling `(.+?)` on a component instance \\(of (.+?)\\) is no longer valid in Svelte 5\nhttps://svelte\\.dev/e/component_api_changed","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/svelte/src/internal/client/errors.js","lineNumber":91,"sourceCode":"\t\tthrow new Error(`https://svelte.dev/e/bind_not_bindable`);\n\t}\n}\n\n/**\n * Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5\n * @param {string} method\n * @param {string} component\n * @returns {never}\n */\nexport function component_api_changed(method, component) {\n\tif (DEV) {\n\t\tconst 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`);\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_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`);","sourceCodeStart":73,"sourceCodeEnd":109,"githubUrl":"https://github.com/sveltejs/svelte/blob/20b341f10048cf1016a2028ac7eee5595cfef6a5/packages/svelte/src/internal/client/errors.js#L73-L109","documentation":"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.","triggerScenarios":"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`.","commonSituations":"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.","solutions":["Replace `$set({x: 1})` with props: pass `x` reactively from the parent and let the child read it.","Replace `$on('event', cb)` with callback props: `let { onevent } = $props()` and have the child invoke it.","For third-party code you cannot change, set the compiler option `compatibility.componentApi: '4'` to keep the legacy instance API working."],"exampleFix":"// before\n<script>\n  let comp;\n</script>\n<Child bind:this={comp} />\n<button on:click={() => comp.$set({ open: true })}>Open</button>\n\n// after\n<script>\n  let open = $state(false);\n</script>\n<Child {open} />\n<button onclick={() => open = true}>Open</button>","handlingStrategy":"fallback","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Drive component state from props instead of imperative `$set`/`$on`/`$destroy` calls.","For third-party code you cannot edit, set `compatibility.componentApi: '4'` in compiler options.","Replace `$on('event', cb)` with callback props (`onevent`)."],"tags":["svelte5","runtime","component-api","imperative","migration"],"backgroundTag":null,"analyzedSha":"20b341f10048cf1016a2028ac7eee5595cfef6a5","analyzedAt":"2026-08-12T23:37:30.399Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}