svelte-dnd-action: SvelteKit support and breakage on the newest Svelte versions

Hi there,

Awesome package!

Though I understand SvelteKit is still beta, I thought I’d ask if there were any plans of adopting support.

Tested it out just now with SvelteKit v1.0.0-next.125 and it unfortunately appears very buggy with items vanishing, sticking, and stacking in weird ways. I didn’t see any explicit errors being thrown, so not sure what the underlying issue is.

To reproduce, I am just initializing a skeleton project with npm init svelte@next and then replacing the contents of src/routes/index.svelte with the provided Super basic, single list, no animation svelte-dnd-action example code.

GIF showing buggy behavior

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 4
  • Comments: 22 (13 by maintainers)

Most upvoted comments

I think it works fine with Sapper. I wonder what the issue is. Will try to make time and have a look. Thx for letting me know

On Tue, Jul 13, 2021, 05:48 Ross @.***> wrote:

Hi there,

Awesome package!

Though I understand SvelteKit is still beta, I thought I’d still ask if there were any plans of adopting support.

Tested it out just now with SvelteKit v1.0.0-next.125 and it unfortunately appears very buggy with items vanishing, sticking, and stacking in weird ways. I didn’t see any explicit errors being thrown, so not sure what the underlying issue is.

To reproduce, I am just initializing a skeleton project with npm init @.*** and then replacing the contents of src/routes/index.svelte with the provided Super basic, single list, no animation https://svelte.dev/repl/bbd709b1a00b453e94658392c97a018a?version=3.24.1 svelte-dnd-action example code.

[image: GIF showing buggy behavior] https://camo.githubusercontent.com/ccd5e8ad7204394b7864936428d6b3dd3eec886aabede0b4a6c9fc459f76e54d/68747470733a2f2f692e706f7374696d672e63632f33784464333052722f7376656c74652d646e642d616374696f6e2d6b69742d6275672e676966

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/304, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCYKY6PN3CDWWPQCVGDTXNBIZANCNFSM5AHP6UKA .

Alright, I created a bug for Svelte, including a REPL that reproduces it without using the library. It happens just by reordering a simple array. It started happening in v3.38.0, any version before should work fine. Here is the svelte issue: https://github.com/sveltejs/svelte/issues/6535

The workaround - use Svelte v3.37. or below. for now*

@SleepingRobot would be awesome if you could find which version of SvelteKit introduced this issue. If not, I will try to find time to do it soon.

I ran into this issue after performing a npm update which bumped my svelte to the latest version, v3.38.3 (svelte-dnd-action was at 0.5.3 at the time). After reinstalling svelte at v3.24.1, the issue is no longer present. The latest version of svelte-dnd-action also works with svelte@3.24.1 from what I can tell.

Here is a console error I get if I keep trying to drag items after one gets hidden:

Uncaught (in promise) DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

If I continue trying to drag things after that error, I will get this one:

Uncaught TypeError: Cannot read property ‘getBoundingClientRect’ of undefined at Pn (intersection.js:10) at pointerAction.js:271 at Vi (pointerAction.js:266)

Hopefully this helps