TypeError: Cannot destructure property 'element' of 'undefined' as it is undefined

[dylanmcgowan]

Hello, I am trying to upgrade to Vue 3, and am running into an error preventing me from displaying the draggable items. Here is the full output: It's saying the scoped slot props are undefined if I'm not mistaken? Whats going on here?

TypeError: Cannot destructure property 'element' of 'undefined' as it is undefined.
    at http://test.localhost:3000/src/pages/questions.vue?import&t=1644426545158:231:37
    at renderFnWithContext (http://test.localhost:3000/node_modules/.vite/chunk-JWMJ27G5.js?v=55c95ff4:1753:17)
    at Object.get (http://test.localhost:3000/node_modules/.vite/chunk-JWMJ27G5.js?v=55c95ff4:9302:24)
    at computeNodes (http://test.localhost:3000/node_modules/.vite/vuedraggable.js?v=55c95ff4:5931:31)
    at computeComponentStructure (http://test.localhost:3000/node_modules/.vite/vuedraggable.js?v=55c95ff4:5967:25)
    at Proxy.render (http://test.localhost:3000/node_modules/.vite/vuedraggable.js?v=55c95ff4:6054:42)
    at Proxy.compatRender (http://test.localhost:3000/node_modules/.vite/chunk-JWMJ27G5.js?v=55c95ff4:5787:22)
    at renderComponentRoot (http://test.localhost:3000/node_modules/.vite/chunk-JWMJ27G5.js?v=55c95ff4:1785:39)
    at ReactiveEffect.componentUpdateFn [as fn] (http://test.localhost:3000/node_modules/.vite/chunk-JWMJ27G5.js?v=55c95ff4:5154:26)
    at ReactiveEffect.run (http://test.localhost:3000/node_modules/.vite/chunk-JWMJ27G5.js?v=55c95ff4:8268:23)

Here are the relevant packages:

{
  "@vue/compat": "^3.2.29",
  "@vue/compiler-sfc": "^3.2.29",
  "vue":  "^3.2.29",
  "vuedraggable": "^4.1.0"
}

This is how I'm using the <draggable> component in <template>..

<draggable
  v-model="dragItems"
  @update="handleDrop"
  handle=".my__drag"
  class="flex flex-col py-6 -mt-3 smd:mt-0"
  item-key="myId"
  :disabled="myDragDisabled"
>
  <template #item="{ element }">
    <my-item :stuff="element"  />
  </template>
</draggable>

This is how I'm importing it in <script>.. and I'm also using the new setup() function

<script>
import draggable from 'vuedraggable'
import { useStore, computed } from 'vuex'

export default {
  components: {
    draggable,
  },
  setup() {
    const store = useStore()
    const dragItems = computed(() => store.state.dragItems)

    return { dragItems }
  }
}
</script>

Any help would be very much appreciated!

[dylanmcgowan]

Hey all, this issue went away after uninstalling @vue/compat

If you run into this issue when migrating your Vue 2 app to Vue 3, you'll unfortunately have to wait until you are at a place where you can uninstall the compatibility build. So comment your draggable shit out, get rid of the rest of the vue warnings, uninstall compat, then update to the new vue 3 draggable syntax from this repo.

[icodepixels]

Adding draggable.compatConfig = { MODE: 3 }; to the component should fix this issue.

[Sammuel09]

Adding draggable.compatConfig = { MODE: 3 }; to the component should fix this issue.

@icodepixels, I'm curious, do you mean adding this config to the component in which the draggable component is used?

[davidphamntq]

@Sammuel09 yes