TypeError: Cannot set properties of null (setting '__draggable_context')

[keziakoko]

Hello,

I am getting the following error when my page loads:

TypeError: Cannot set properties of null (setting '__draggable_context')
    at addContext (node_modules\vuedraggable\dist\vuedraggable.umd.js:4478:1)
    at eval (node_modules\vuedraggable\dist\vuedraggable.umd.js:4523:1)
    at Array.forEach (<anonymous>)
    at ComponentStructure.updated (node_modules\vuedraggable\dist\vuedraggable.umd.js:4522:1)
    at Proxy.updated (node_modules\vuedraggable\dist\vuedraggable.umd.js:4829:1)
    at callWithErrorHandling (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:155:1)
    at callWithAsyncErrorHandling (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:164:1)
    at Array.hook.__weh.hook.__weh (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:2685:1)
    at flushPostFlushCbs (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:356:1)
    at flushJobs (node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js:401:1)

I cannot drag anything, when I try to drag I get the following error:

node_modules\vuedraggable\dist\vuedraggable.umd.js:4974 Uncaught TypeError: Cannot read properties of null (reading 'index')
    at Proxy.onDragUpdate (node_modules\vuedraggable\dist\vuedraggable.umd.js:4974:1)
    at Proxy.eval (node_modules\vuedraggable\dist\vuedraggable.umd.js:4694:1)
    at Sortable.eval (node_modules\vuedraggable\dist\vuedraggable.umd.js:4705:1)
    at dispatchEvent (node_modules\sortablejs\modular\sortable.esm.js:916:1)
    at _dispatchEvent (node_modules\sortablejs\modular\sortable.esm.js:961:1)
    at Sortable._onDrop (node_modules\sortablejs\modular\sortable.esm.js:2216:1)
    at Sortable.handleEvent (node_modules\sortablejs\modular\sortable.esm.js:2269:1)
    at Sortable.__trace__ [as handleEvent] (node_modules\@bugsnag\browser\dist\bugsnag.js:2764:1)

I have tried downgrading to versions 4.0.1 as well as version 4.0.0 and both still throw the error.
This is my component:

<draggable item-key="id" v-model="person" handle=".gripIcon" @start="drag=true" @end="drag=false" tag="transition-group" :component-data="{name:'flip-list'}">
    <template #item="{element,index}">
        <component :is="element.name" :id="element.id"
                   v-bind:key="element.id"
                   v-on:delete-row="deleteRow(index)"
                   v-on:update-info="data => updateInfo(index,data)">
        </component>
    </template>
</draggable>

Please assist.

[JokerMartini]

This issue is never ending what is this? I get this issue all the time now??? This has broken the app completely. Hopefully this is resolved soon.

[JokerMartini]

I noticed the authors own code examples don't even work. I think he needs to update them.

[superchangme]

man,i have same question with you,but it may be not Stable Recurrence,Have you solved it?

[superchangme]

I noticed the authors own code examples don't even work. I think he needs to update them.

Do you use vite ?

[JokerMartini]

They don't work with vite or webpack

[superchangme]

They don't work with vite or webpack

what a pity,i remove tag="transition-group"

[keziakoko]

I have not solved it, it is still happening. I do not use vite.

[keziakoko]

Removing the tag="transition-group" worked for me. I no longer get the error. Kinda sad though cause now there's no more smooth transitions when dragging and swapping items!

[JokerMartini]

in order to work you have to downgrade your vue and that solves it. go to 3.2.30

[keziakoko]

Currently running vue version 3.0.0. We have not upgraded it yet.

[JokerMartini]

if that is the case im not sure why it's broken on your end.

[redrbrt]

Same error for me, i couldn't make it run with tag="transition-group" (vite, vue 3, typescript) by following the simple code example guide, i decided to switch the SortableJS vanilla version, hope could it be fixed, thank you!

[gbaggaley]

Not working for me either, I'm using Vue 3.2.33.

Draggable works fine without the transition on it, but I'm getting the same error as soon as I add tag="transition-group"

[hooray]

Will the official fix this problem? I see that the last version is still released in 2020

[mreduar]

This error did not happen to me before and started to happen when I performed an npm update.
The error was fixed by setting vue to version 3.2.30 currently 3.2.33
"vue": "3.2.30",