Uncaught TypeError: Illegal invocation

[LexRiver]

Describe the bug

I'm trying to use SortableJS in Svelte and I'm getting the following error:

Uncaught TypeError: Illegal invocation

	in Sortable.svelte
	in +page.svelte
	in layout.svelte
	in root.svelte

    at get_next_sibling (chunk-HBXI42UK.js?v=2561df4a:1489:30)
    at move (chunk-PJJ6XEAX.js?v=2561df4a:925:7)
    at reconcile (chunk-PJJ6XEAX.js?v=2561df4a:793:11)
    at chunk-PJJ6XEAX.js?v=2561df4a:680:7
    at update_reaction (chunk-HBXI42UK.js?v=2561df4a:1796:23)
    at update_effect (chunk-HBXI42UK.js?v=2561df4a:1906:21)
    at process_effects (chunk-HBXI42UK.js?v=2561df4a:2052:13)
    at flush_queued_root_effects (chunk-HBXI42UK.js?v=2561df4a:1983:33)

Can you please explain why is this happening and how can I avoid it?

Reproduction

https://github.com/LexRiver/svelte-test-001/tree/main

pnpm run dev

http://localhost:5173/

try dragging items with top handle and check console errors

Logs

System Info

"@sveltejs/adapter-auto": "^4.0.0",
		"@sveltejs/kit": "^2.16.0",
		"@sveltejs/vite-plugin-svelte": "^5.0.0",
		"@types/sortablejs": "^1.15.8",
		"sass-embedded": "^1.85.1",
		"svelte": "^5.0.0",
		"svelte-check": "^4.0.0",
		"typescript": "^5.0.0",
		"vite": "^6.0.0"

Severity

annoyance

[paoloricciuti]

SortableJS is moving Dom elements around and this messes with svelte hydration. When you mount a component to get the element that needs updates svelte produced a series of steps that use get next sibling...but this requires a stable Dom tree.

Thanks for reporting, but closing this 😊