Skip to content

[Svelte 5] Error bind:value cannot be used with dynamically mounted components #13795

Closed as not planned
@rgon

Description

@rgon

Describe the bug

When defining a child with a $bindable prop named value (which is quite ergonomic on custom inputs):

// child
let {value = $bindable} = $props()

If we create a component that dynamically mounts it, when given as a parameter (new svelte:component),

<script>
  let { chosenInput } = $props();
  
  let inputState = $state('default text');
</script>

<chosenInput bind:value={inputState} />

We will get the error:

`bind:value` can only be used with <input>, <textarea>, <select>svelte(bind_invalid_target)

This shouldn't be the case, since we very clearly can bind:value if such bindable property exists (REPL)

Reproduction

Error REPL

Workaround:

For some reason, it does work if the Component we're initializing is an object's member, so we can wrap it with {@const}: Workaround REPL

{#if chosenInput}
{@const workaround = {
  component: chosenInput
}}
<workaround.component bind:value={inputState} />
{/if}

Note that, since this is not a language-tools error/warning, we cannot fix it with a type definition that includes value as a bindable. The runtime error does not go away:

let chosenInput: Component<Record<string,any>, {}, "value">

Logs

No response

System Info

svelte@5.0.5

Severity

annoyance, have found a workaround

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions