Cannot read property 'element' of null when using vue component

[lu-roth]

The same error occured within Vue.Draggabel for vue 2 as you can see in this issue:

SortableJS/Vue.Draggable#647

It was fixed in Version 2.22.0 but seem to appear in version 4.1 for vue3.

When using a Vue component inside the template tag, an error occurs when dragging the elements which says
Cannot read property 'element' of null

This won't work:

   <draggable
        class="draggable"
        :list="components"
        item-key="uuid"
        group="shared"
        animation="300"
        :key="components.length"
    >
      <template #item="{element}">
        <ZrmRow :isActive="chosenElement && chosenElement.uuid === element.uuid" :zrmComponent="element"/>
      </template>

But wrapped with a single div this does work:

 <draggable
       class="draggable"
       :list="components"
       item-key="uuid"
       group="shared"
       animation="300"
       :key="components.length"
   >
     <template #item="{element}">
       <div>
       <ZrmRow :isActive="chosenElement && chosenElement.uuid === element.uuid" :zrmComponent="element"/>
       </div>
     </template>

The error occurs in vuedraggable.js:
this.context seems to be null

 onDragStart(evt) {
      this.context = this.getUnderlyingVm(evt.item);
      evt.item._underlying_vm_ = this.clone(this.context.element);
      draggingElement = evt.item;
    },

System info
macOS 12.3.1
Node v18.1.0
npm 8.8.0

Packages
vue 3.2.37
vuedraggable 4.1.0

Builder
vite 2.9.12
@vitejs/plugin-vue 2.3.3
typescript 4.7.4
vue-tsc 0.38.3

Browser
Chrome 106.0.5249.103

[Androphin]

This is relevant #46

[mreduar]

This is still happening and I can't have an extra div because it is a table and everything is packed into one element. @lu-roth Have you found another solution?

[rohini-mothe-maersk]

Any solution ?

[andi-b]

I manage to resolve the issue by making sure the child component is imported. It was previously imported as a global component via defineAsyncComponent, which meant it wasn't being loaded in time.