Everything works as long as all the elements are initialized from the beginning.

As soon as I add an element on runtime via javascript (and then also successfully register in the store), the next mousedown event logs this obsfuscated error and doesn't allow any drag and drop operations (not the old elements and also not the new ones).

The logged, obfuscated error:

Uncaught TypeError: h2 is undefined
    st dflex-dnd.mjs:1
    it dflex-dnd.mjs:1
    et dflex-dnd.mjs:1
    gt dflex-dnd.mjs:1
    onMouseDown DnDComponent.tsx:83
    React 23
    hydrate entry.client.tsx:7
    startTransition React
    hydrate entry.client.tsx:6
    requestIdleCallback handler* entry.client.tsx:17
2 dflex-dnd.mjs:1:27428

I used the example code that has this nice DnDComponent for React. I also found out the line in the component that's triggering the error:

        dflexDnD = new DnD(id, { x: clientX, y: clientY }, opts); //<-- this is line 83

I also noticed that the JavaScript-added element doesn't follow the data-index count of the other elements, but starts from 0 again (each additional javascript-added element then counts up 1, 2, 3 from there on again).

If I do

        console.log(store.getContainerByID(id));
        dflexDnD = new DnD(id, { x: clientX, y: clientY }, opts);

The logged container looks normal, same as before I dynamically add an element at runtime (where everything still worked). So the store does indeed contain this newly added element. Also when I add an element via javascript and then save and reload the page, everything works again, until I add another element.

What may I have forgotten to do? Unfortunately, my whole code is way too long, but the core part is mapping a list with each element mapping to a DnDComponent. As soon as I add one item to that list via JavaScript, it seems to mess up something.

I tried to read as much as possible in the codebase about how the new DnD constructor is, but nothing jumped my eye.