Error using vue3.2.32 + vite 2.9.4

[muyi0728]

[Tnze]

same here

[lhermann]

Made some tests. The issue is not vite. It works fine with [email protected] (latest as of the time of this writing) The problem is with [email protected] and higher

[chobitsnerv]

Similiar here: Uncaught TypeError: Cannot set properties of null (setting '__draggable_context') at addContext2 (componentStructure.js:3:15) at componentStructure.js:33:7 at Array.forEach (<anonymous>) at ComponentStructure.updated (componentStructure.js:32:18) at Proxy.mounted (vuedraggable.js:125:24) at callWithErrorHandling (runtime-core.esm-bundler.js:155:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21) at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2685:29) at flushPostFlushCbs (runtime-core.esm-bundler.js:356:32) at render2 (runtime-core.esm-bundler.js:5688:9) I did a test and it works again after I removed the tag="transition-group" Tested under "vue": "^3.2.33", "vite": "^2.9.5"

[chobitsnerv]

https://github.com/vuejs/core/blob/main/CHANGELOG.md#3232-2022-04-12 [email protected]looks update "transition-group" which may casue some issues here, I have some warning msg as following from chrome. Hope it can help in some degree.

@David-Desmaisons

[sortingbubbles]

We are having the same issue after updating to vue 3.2.33.

[pungfen]

I having same issue after updating to vue 3.2.33

[muyi0728]

In the temporary solution of vue3.2.33 version, remove the tag="transition-group" attribute, you can run the code normally

[ddmy]

[email protected]

Uncaught (in promise) TypeError: Cannot set properties of null (setting '__draggable_context') remove the tag="transition-group" attribute, it's ok

[JokerMartini]

If you remove the transition-group attribute, then you are forced to use a vertical layout of draggable. What does transition group do under the hood that i could mimic without adding the attribute?

[JokerMartini]

Code like this

<draggable
      v-model="appItems"
      tag="transition-group"
      v-bind="dragOptions"
      item-key="uid"
    >
      <template #item="{ element }">
        <AppItemCard :item="element" :key="element.uid" />
      </template>
    </draggable>

Which previously worked, no longer works with the latest version of vue.

[JokerMartini]

if you downgrade your vue to vue 3.2.30 it will work

[superchangme]

if you downgrade your vue to vue 3.2.30 it will work

Have you solved it?

[superchangme]

it's none of business with vite, it's problem about vue's component transition-group ,it lost el dom property

[dpschen]

This is the same error as in this issue: https://github.com/SortableJS/vue.draggable.next/issues/140#issuecomment-1123622724=

There is a pull request with a fix that is also available as forked package: zhyswan-vuedraggable

[jomanning]

This is the same error as in this issue: #140 (comment)

There is a pull request with a fix that is also available as forked package: zhyswan-vuedraggable

This was able to fix it for me, thank you