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

[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

[adiguba]

Hello,

The problem come from the name of your props : chosenInput.
By convention name that start with lower-case are considered as HTML elements, which causes an error as the compiler does not know the HTML tag (and therefore cannot "bind" the value).

The variable for component must start with an uppercase.
You can either rename the prop or usean alias within your component :

	let {
		chosenInput : ChosenInput
	} = $props();

REPL : https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACs1TO2_CMBD-K1erUkAiZA8BCTp1qwRb0yEkBiyMbdkXWoTy35tzSsKjKu3Wzef7zt_jkiNbCckdi1-PTGU7zmI2NYYNGB4MFW7PJfK6drq0Od0kLrfC4CRVKYqd0RZhCiurdxAMoxehts_KlDhsBoMz1KxFzWTJr1Edbs4lzzFbygbTTl3dn2ZHzbDkCIuNUGsYw6PDDHmvX7eSqJOrEuefgKVQRbzPahXjo5-pvJtEGxRawVdnWk3IDni2JGqa3wFn1YQc3QBrbs_XcF_byjfaceXPJxUQTeqkd7oQK8ELFqMteTVoF3P1wm-XRMkc6ZDiGSfE8NRV1K4oOWO1cT6506ig_pwC7ZINCr7KSomA_AOD25wfwhDehZRgM-E4LObArdUWwpBiOeO9WEXHdC-J9jP7UwaehkwQKcXY6597vjCReDFAj49TRjZTBg4Pkspllm_XVpeqCHMttY3B1IJGNaKz86P-9gf4L_rzQ6bu6n-rPgHnHmESLgQAAA==

[rgon]

@adiguba I just found out and was editing this issue to be a documentation one. Thank you anyways!

I think the docs should reflect that in the migration guide, since when migrating from svelte:component, most variable names will in fact start from lowercase:
https://svelte.dev/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-svelte:component-is-no-longer-necessary

Are you aware if this is mentioned somewhere else? It surely deserves a page in the docs.

[rgon]

Closing this issue and opening related one in sveltejs/svelte.dev