Svelte 5: List of libraries not working out of the box

[dummdidumm]

Describe the bug

Some libraries don't work with Svelte 5 out of the box. It will probably be impossible to make every library compatible given that some use stuff svelte/internal (which they really shouldn't) and everything in there changed, but those who don't should be closely investigated. Feel free to post libraries you found that don't work in here, ideally along with a small reproduction (repro or "install and use component X").

To investigate

• svelte-turnstile

Won't / can't fix

• Svelte wrapper for Tanstack Table, because it uses svelte/internal in a way that can't be backported Svelte 5 support: ERROR: No matching export in "a" for import "b" TanStack/table#5213 - but a new version of the library is underway with Svelte 5 support!

Fixed

• svelte-confetti
• svelte-range-slider-pips (through fix: better interop of $state with actions/$: statements #10543)

Reproduction

Use the libraries and observe errors

Logs

No response

System Info

-

Severity

annoyance

[mstachowiak]

svelte-turnstile breaks as a result of #8301. If that issue is fixed, svelte-turnstile will function properly.

[mstachowiak]

svelte-confetti has been fixed as of version 1.3.2
Mitcheljager/svelte-confetti#10

[dummdidumm]

svelte-turnstile breaks as a result of #8301. If that issue is fixed, svelte-turnstile will function properly.

@mstachowiak what doesn't work exactly here? #8301 is present in Svelte 4 as well. The library should work since it sets the script tag only after it's mounted. Maybe the cause was #9484 which was fixed by #10416 in the meantime - could you try to reproduce again?

[ejsmith]

It seems like a ton of libraries are using svelte/internal is there no way to mimic the functionality of the most common things they are doing to greatly reduce the ecosystem fragmentation?

[dit7ya]

TanStack/table#5213. The svelte wrapper for TanStack Table is using svelte/internal and thus is broken.

[jakubdonovan]

svelteflow.dev - the following error occurs as soon as the dep is installed

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/qw/projects/qwerty/node_modules/.pnpm/@xyflow+svelte@0.0.37_svelte@5.0.0-next.69/node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow' is not supported resolving ES modules imported from /home/sol/projects/qwerty/node_modules/.pnpm/@xyflow+svelte@0.0.37_svelte@5.0.0-next.69/node_modules/@xyflow/svelte/dist/lib/index.js

[bayaderpack]

https://github.com/vkurko/calendar

Error when evaluating SSR module /node_modules/svelte/src/internal/index.js:
|- Error: Your application, or one of its dependencies, 
imported from 'svelte/internal', which was a private module used by Svelte 4 components that no longer exists in Svelte 5

The library is using a lot of svelte/internal

import { run_all, is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, action_destroyer, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';

[jacob-8]

@dummdidumm Kitbook copies the Svelte DevTools chrome extension use of SvelteRegisterBlock, SvelteRegisterComponent and the create_fragment m, p, and d functions to build up the active component tree w/ associated dom elements. I've looked around a bit (particularly in ownership.js at mark_module_start and mark_module_end) for the equivalents in Svelte 5 but it's not apparent to me what a good path forward would be. See this comment for a little more context. Do you guys have a plan yet for how the Svelte DevTools is going to track with mounted components and elements? Is this going to need to wait for the final 5.0 release? Thanks!

[dummdidumm]

Created #11389 to track the devtools integration story

[Serator]

sveltekit-superforms - ciscoheat/sveltekit-superforms#426 - incompatible in rune mode for the entire app.

[Serator]

svelte-highlight - incompatible in rune mode for the entire app, but there is a compatible alternative - svelte-rune-highlight

[dummdidumm]

From the linked issue it sounds like you're setting runes: true in the compiler options. You shouldn't be doing this when using any component libraries that are still using Svelte 4 syntax. Instead it's best to implicitly opt into runes mode on a per file basis by using runes inside your components.

[Serator]

Yeah, I did that, but I decided to come at it from the other angle and, following the advice from here, turned rune mode on for the entire app and turned it off for the individual incompatible library.

svelte.config.js

  vitePlugin: {
    dynamicCompileOptions({filename}) {
      if (filename.includes('node_modules/sveltekit-superforms')) {
        return {runes: false}
      }
    },
  },

I think it would be helpful to have this info in the documentation.

[pheuter]

This is a weird one that I'm able to consistently reproduce (see repro below) on latest version of Svelte 5, Superforms, Formsnap, and Bits UI. Whenever a form input binds to control attrs, which is the recommended approach, any event handlers attached to that input do not fire. However, removing the {...attrs} spread appears to work.

Repro: https://stackblitz.com/~/github.com/pheuter/formcontrol-event-repro

---

Broken:

<Form.Field {form} name="firstName">
	<Form.Control let:attrs>
		<Form.Label>First Name (`oninput` broken)</Form.Label>
		<Input
			{...attrs}
			bind:value={$formData.firstName}
			oninput={(e) => alert(`onchange: ${e.currentTarget.value}`)}
		/>
	</Form.Control>
	<Form.FieldErrors />
</Form.Field>

Working:

<Form.Field {form} name="lastName">
	<Form.Control>
		<Form.Label>Last Name (`oninput` working)</Form.Label>
		<Input
			bind:value={$formData.lastName}
			oninput={(e) => alert(`onchange: ${e.currentTarget.value}`)}
		/>
	</Form.Control>
	<Form.FieldErrors />
</Form.Field>