How do you `use:` a bound component value in Svelte?

July 18, 2023

I have the following:

<script lang="ts">
  import MyComponent from './MyComponent.svelte'
  let component: MyComponent
</script>

<MyComponent bind:this={component} />

<input use:component.inputActions />

But this produces the error:

Cannot read properties of undefined (reading ‘inputActions’)

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

MyComponent.js contains the following export:

<script lang="ts">
export function inputActions(node: HTMLElement) {
  // ...
}
</script>

However it works fine if inputActions is defined in that same component.

>Solution :

component will only be defined after the respective component is mounted.

You could wrap the <input> using the action in an {#if component} to work around this. Though I question whether the action really needs to be defined on a component instance…