[bug] Sortable.destroy Catch error at beforeUnmount hook

[YeKelvin]

main.js?t=1662605540736:50 Catch error at beforeUnmount hook: TypeError: Cannot set properties of null (setting 'Sortable1662605561360') at Sortable.destroy (sortable.esm.js:2450:8) at Proxy.beforeUnmount (vuedraggable.js:146:54) at callWithErrorHandling (runtime-core.esm-bundler.js:155:22) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2682:29) at invokeArrayFns (shared.esm-bundler.js:561:13) at unmountComponent (runtime-core.esm-bundler.js:6172:13) at unmount (runtime-core.esm-bundler.js:6066:13) at unmountChildren (runtime-core.esm-bundler.js:6210:13) at unmount (runtime-core.esm-bundler.js:6084:17)

[YeKelvin]

"vue": "3.2.38" "sortablejs": "1.15.0" "vuedraggable": "4.1.0"

[Zen33]

Same issue.

[Ischca]

Same. I ran into this issue with Slickgrid and ended up here.

[ghiscoding]

did anyone find a way to bypass or avoid this issue?

EDIT

I actually found that in my case in a SPA (single page app) with SlickGrid (a datagrid lib), I have to call destroy prior to recreating any Sortable instances and that fixed my issue, something along these lines

export class MyDraggableGrid {
  sortableInstance;

  function setupColumnOrder() {
+    if (sortableInstance) {
+        sortableInstance.destroy();
+     }

     // we can create a new Sortable instance knowing any previous ones are destroyed
     const headerColumnElm =  document.querySelector(`.slick-header-columns`) as HTMLDivElement
     this.sortableInstance = Sortable.create(, sortableOptions) as SortableInstance;
  }