Errors with <svelte:element> and forwarded events

[endigo9740]

Describe the bug

Hey everyone, I'm Chris from the Skeleton UI library. I wanted to report an odd issue we've seen come up with the v1.0 launch of SvelteKit.

In short, we have a couple components in our library which utilize <svelte:element> and forward events such as on:click|keypress|keydown|keyup. Here's a quick example:

https://github.com/skeletonlabs/skeleton/blob/53c84e3d156cf80ee5f07ac6312b617dd0d824cb/src/lib/components/AppRail/AppRailTile.svelte#L59

This works fine when we're running the local SvelteKit library project. No issues or errors reported. Functionally the components operate as expected.

Unfortunately as soon as we package and distribute the components as an NPM package, any SvelteKit project consuming the package/component suddenly start reporting errors:

node_modules/.pnpm/@[email protected]/node_modules/@skeletonlabs/skeleton/components/AppRail/AppRailTile.svelte:400:10: ERROR: The symbol "keydown_handler" has already been declared
node_modules/.pnpm/@[email protected]/node_modules/@skeletonlabs/skeleton/components/AppRail/AppRailTile.svelte:404:10: ERROR: The symbol "keyup_handler" has already been declared
node_modules/.pnpm/@[email protected]/node_modules/@skeletonlabs/skeleton/components/AppRail/AppRailTile.svelte:408:10: ERROR: The symbol "keypress_handler" has already been declared
    at failureErrorWithLog (/Users/nik/code/blog-tutorials/responsive-sidebar-drawer/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1594:15)
    at /Users/nik/code/blog-tutorials/responsive-sidebar-drawer/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1050:28
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Basically an error per each each forwarded event attached to the <svelte:element> instance.

Reproduction

To confirm this issue I've created a minimal reproduction by doing the following:

1. Use the "create svelte" CLI to create a new SvelteKit "library" project
2. Add a component to the library called Foobar.svelte, which implements the following:

<script lang="ts">
  export let tag = "div";
</script>

<svelte:element this={tag} href={$$props.href} on:click on:keydown on:keyup on:keypress>
  <slot />
</svelte:element>

3. Updated the package.json script commands with the following: "package": "svelte-kit sync && svelte-package",
4. Create the package with npm run package
5. Finally I created a tarball of the package using cd package then npm pack.

You can find the generated tarball attached below: event-forwarding-test-0.0.1.tgz

Next, I went through the process of creating another standard SvelteKit project to "consume" the package:

1. Use the "create svelte" CLI to create a new barebones Sveltekit project
2. Add the tarball to the project root and installed via npm install event-forwarding-test-0.0.1.tgz --save-dev
3. Then import and add the Foobar component to the homepage route:

<script lang="ts">
  import Foobar from "event-forwarding-test/Foobar/Foobar.svelte";
</script>

<Foobar>Hello World</Foobar>

When the component is imported the errors reported above immediately begin to show.

NOTE: I've tested this with both SvelteKit v1.0.0 and v1.0.1

Logs

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 253.38 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.8.0 - /opt/homebrew/bin/node
    npm: 8.18.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 106.0.2
    Safari: 15.6.1
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.0 
    @sveltejs/kit: ^1.0.0 => 1.0.0 
    svelte: ^3.54.0 => 3.55.0 
    vite: ^4.0.0 => 4.0.2

Severity

serious, but I can work around it

Additional Information

As a temporary work around we're going to opt to move the forwarded events up and out of the <svelte:element> tags. However, this behavior has worked fine in the past. It is not until updating to SvelteKit v1.0.x that these errors began to appear.

[endigo9740]

Quick update - by moving our forwarded events off of the <svelte:element> (to a wrapping element) we've resolved the issue temporarily.

https://github.com/skeletonlabs/skeleton/commit/638592e1964b660e4018a6ad70f276dfe3ecbe7f

Just curious if this was an intended change or if we can expect a fix to revert to the prior behavior. Thanks!

[dominikg]

looks like a recent change in esbuild triggers this. please try downgrading to 0.16.8 and see if that fixes it.

https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0169

[dominikg]

another option to try is to add the library to optimizeDeps.exclude in vite config, which prevents it from getting prebundled with esbuild during dev

[endigo9740]

Thanks @dominikg we'll test and respond with results. It's late here, so might not be until tomorrow. But thanks!

[bluwy]

Seems like a bug in Svelte where the handlers are generated twice (repl)

[dominikg]

the error has been fixed in esbuild 0.16.10

[dominikg]

duplicated handler code has also been fixed in svelte 3.55.1 https://github.com/sveltejs/svelte/pull/8142