Illegal invocation on:click in #each

[alexisgaillard43]

Describe the bug

I'm building search drop-downs, and encounter the error "Uncaught TypeError: Illegal invocation" when clicking in the list. The list's array - users - is generated dynamicaly from an API call response.

Reproduction

function addOwnership({ payload }: { payload: SelectedOwnershipsOptions }): void {
  ...
};


{#if panelVisibility}
  <div transition:fade={{ duration: 220 }} >
    {#each users as { userId, username, verified, avatar, role, ownership, skills } (userId)}
      <button on:click|preventDefault={() => addOwnership({ userId, username, verified, role, ownership })} >
        <AvatarThumbnail
          avatar={{
            avatar,
            title: username
          }}
       />
       ...
     </button>
   {/each}
  </div>
{/if}

Logs

Uncaught TypeError: Illegal invocation

System Info

Svelte Kit with Svelte 4.2.1

Severity

annoyance

[paoloricciuti]

This is not a reproduction: please provide a link to the svelte repl or a sveltelab/stackblitz or a github repo with the actual problem reproduced (also the more minimal your reproduction the faster we can fix this problem).

Thanks for reporting 😃