Skip to content

svelte 5: Can't use destructuring with @const and use the value inside an event handler #10317

@bfanger

Description

@bfanger

Describe the bug

<script>
  let structured = $state({ handler() {} })
</script>

{#if structured}
  {@const { handler } = structured}

  <button onclick={() => handler()}>click me</button>
{/if}

Generates a corrupted component which fails with Error: handler is not defined
This is due to the generated code:

const computed_const = $.derived(() => {
  const { handler } = structured;

  return { handler };
});

button.__click = [on_click, handler];

where handler is not available outside the lexical scope of the derived closure.

Reproduction

REPL

Logs

Error: handler is not defined

System Info

svelte: 5.0.0-next.40
generate: "client"

Severity

blocking an upgrade

Metadata

Metadata

Assignees

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