overrideItemIdKeyNameBeforeInitialisingDndZones not working as expected in Svelte v5

[EricSSartorius]

In V4, importing and calling overrideItemIdKeyNameBeforeInitialisingDndZones at the top of the component using DND worked as expected. In Svelte v5 (RC) this no longer works. I get an error saying Uncaught Error: can only override the id key before initialising any dndzone. The UI renders but after trying to drag an item everything breaks.

[isaacHagoel]

Hi @EricSSartorius,
I tried to reproduce this today but it seems to work fine for me.
I tried this using svelte 5.0.0-next.136 (tried v4 as well):

<script>
    import {dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones} from "svelte-dnd-action";
    overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
    function handleSort(e) {
        items = e.detail.items;
    }
    let items = [
        {_id:1, title: 'I'},
        {_id:2, title: 'Am'},
        {_id:3, title: 'Yoda'}
    ];
</script>
<style>
    section {
        width: 12em;
        padding: 1em;
        height: 7.5em;
    }
    div {
        height: 1.5em;
        width: 10em;
        text-align: center;
        border: 1px solid black;
        margin: 0.2em;
        padding: 0.3em;
    }
</style>
<section use:dndzone={{items}} on:consider={handleSort} on:finalize={handleSort}>
    {#each items as item(item._id)}
        <div>
            {item.title}
        </div>
    {/each}
<

What am I missing? Can you provide a way to reproduce?

[EricSSartorius]

I tried to reproduce with something simple in SvelteBlitz but was having trouble myself which makes me think that the current complexity of my app is related to the problem.

I am currently fetching data from the DB in the page.server.ts file, sending that to the +page.svelte file and setting it in a store so that I can implement custom functionality to lazyload items on scroll, then in the child Board component I am setting overrideItemIdKeyNameBeforeInitialisingDndZones. navigating to the page is giving me an error but after refresh it loads fine. I can try to simplify code in my repo and maybe get things to work but I'm not sure why everything is perfectly fine in Svelte v4 but not v5 though.

[EricSSartorius]

New information around this @isaacHagoel (still not working for me).

I realized the problem isn't with multiple instances of DND on one page, it is when going from one page that contains overrideItemIdKeyNameBeforeInitialisingDndZones to another that also contains it that the error occurs. When I navigated from a page that did not have overrideItemIdKeyNameBeforeInitialisingDndZones to the page that did, everything worked fine but not if they both contain the function.

There must be something different with load order when changing pages that I am not aware of in V5.

[isaacHagoel]

Can you make the simplest example that reproduces the issue?

…

On Thu, Aug 15, 2024, 20:35 Eric ***@***.***> wrote: New information around this @isaacHagoel <https://github.com/isaacHagoel> (still not working for me). I realized the problem isn't with multiple instances of DND on one page, it is when going from one page that contains overrideItemIdKeyNameBeforeInitialisingDndZones to another that also contains it that the error occurs. When I navigated from a page that did not have overrideItemIdKeyNameBeforeInitialisingDndZones to the page that did, everything worked fine but not if they both contain the function. There must be something different with load order when changing pages that I am not aware of in V5. — Reply to this email directly, view it on GitHub <#571 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC23GR5DPTQVZKEOYPTZRR75VAVCNFSM6AAAAABHI3FCKKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJRGA2DINJVGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>