{"record":{"id":"112e4c2cdbb72f53","repo":"sveltejs/svelte","slug":"bind-invalid-export","errorCode":"bind_invalid_export","errorMessage":"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","messagePattern":"bind_invalid_export\nComponent (.+?) has an export named `(.+?)` that a consumer component is trying to access using `bind:(.+?)`, which is disallowed\\. Instead, use `bind:this` \\(e\\.g\\. `<(.+?) bind:this=(.+?) />`\\) and then access the property on the bound component instance \\(e\\.g\\. `component\\.(.+?)`\\)\nhttps://svelte\\.dev/e/bind_invalid_export","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/svelte/src/internal/client/errors.js","lineNumber":52,"sourceCode":"\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/bind_invalid_checkbox_value`);\n\t}\n}\n\n/**\n * 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%`)\n * @param {string} component\n * @param {string} key\n * @param {string} name\n * @returns {never}\n */\nexport function bind_invalid_export(component, key, name) {\n\tif (DEV) {\n\t\tconst 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`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/bind_invalid_export`);\n\t}\n}\n\n/**\n * 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()`\n * @param {string} key\n * @param {string} component\n * @param {string} name\n * @returns {never}\n */\nexport function bind_not_bindable(key, component, name) {\n\tif (DEV) {\n\t\tconst 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`);\n\n\t\terror.name = 'Svelte error';\n","sourceCodeStart":34,"sourceCodeEnd":70,"githubUrl":"https://github.com/sveltejs/svelte/blob/20b341f10048cf1016a2028ac7eee5595cfef6a5/packages/svelte/src/internal/client/errors.js#L34-L70","documentation":"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.","triggerScenarios":"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()`.","commonSituations":"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.","solutions":["Mark the prop bindable in the child: `let { count = $bindable() } = $props()`.","If two-way binding is not actually needed, drop `bind:` from the consumer and pass the prop one-way.","For accessing non-bindable instance members, use `bind:this` and read the property off the instance."],"exampleFix":"// before (Child.svelte)\n<script>\n  let { count } = $props();\n</script>\n<!-- consumer -->\n<Child bind:count={n} />\n\n// after\n<script>\n  let { count = $bindable() } = $props();\n</script>\n<Child bind:count={n} />","handlingStrategy":"type-guard","validationCode":"// Inspect the child component's source for $bindable on the bound key.\nfunction isPropBindable(childSource, key) {\n  const re = new RegExp(`\\\\b${key}\\\\s*=\\\\s*\\\\$bindable`);\n  return re.test(childSource);\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Mark two-way-bound props with `$bindable()` in every child component.","Default to one-way props; opt into bindability explicitly.","Use `bind:this` instead of `bind:prop` for accessing non-bindable members."],"tags":["svelte5","runtime","binding","props","bindable","component-api"],"backgroundTag":null,"analyzedSha":"20b341f10048cf1016a2028ac7eee5595cfef6a5","analyzedAt":"2026-08-12T23:37:30.399Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}