Getting some strange render error directly in template DOM

[denysaw]

Step by step scenario

Vue 3.1.1 (tried on 3.0.0 first). Following the manual. Trying to use draggable even for simple array in v-model (tried different item-keys), using only item template. Instead of the generated DOM I see this error:

render/<.item<@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/pages/Election.vue?vue&type=template&id=c3f10f86:770:75
renderFnWithContext@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:1580:23
computeNodes/defaultNodes<@webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4608:12
computeNodes@webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4607:37
computeComponentStructure@webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4646:27
render@webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4767:57
renderComponentRoot@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:828:44
componentEffect@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4299:53
reactiveEffect@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24
effect@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9
setupRenderEffect@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4282:89
mountComponent@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4241:26
processComponent@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4201:31
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3828:37
mountChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4001:18
mountElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3924:30
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3905:25
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3825:35
mountChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4001:18
mountElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3924:30
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3905:25
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3825:35
mountChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4001:18
mountElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3924:30
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3905:25
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3825:35
mountChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4001:18
mountElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3924:30
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3905:25
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3825:35
mountChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4001:18
mountElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3924:30
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3905:25
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3825:35
mountChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4001:18
mountElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3924:30
processElement@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3905:25
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3825:35
patchBlockChildren@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4117:18
processFragment@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4172:35
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3821:32
componentEffect@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4387:22
reactiveEffect@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24
callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:275:36
flushJobs@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:480:38
promise callback*queueFlush@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:382:47
queueJob@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:376:9
run@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:212:28
trigger@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:218:13
set@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:321:24
set@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6290:13
_callee$@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/pages/Election.vue?vue&type=script&lang=js:90:17
tryCatch@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:63:40
invoke@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:293:30
defineIteratorMethods/</<@webpack-internal:///./node_modules/regenerator-runtime/runtime.js:118:21
asyncGeneratorStep@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator/_index.mjs:8:24
_next@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator/_index.mjs:30:27
promise callback*asyncGeneratorStep@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator/_index.mjs:18:28
_next@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator/_index.mjs:30:27
_asyncToGenerator/</<@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator/_index.mjs:37:12
_asyncToGenerator/<@webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator/_index.mjs:26:12
fetch@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/pages/Election.vue?vue&type=script&lang=js:98:10
mounted@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/pages/Election.vue?vue&type=script&lang=js:75:10
callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:275:22
callWithAsyncErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:284:42
injectHook/hook.__weh@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2030:55
flushPostFlushCbs@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:451:47
flushJobs@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:487:26
promise callback*queueFlush@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:382:47
queueJob@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:376:9
run@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:212:28
trigger@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:218:13
set value@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:759:20
finalizeNavigation@webpack-internal:///./node_modules/vue-router/dist/vue-router.esm-bundler.js:3088:9
pushWithRedirect/<@webpack-internal:///./node_modules/vue-router/dist/vue-router.esm-bundler.js:2961:27
promise callback*pushWithRedirect@webpack-internal:///./node_modules/vue-router/dist/vue-router.esm-bundler.js:2932:14
push@webpack-internal:///./node_modules/vue-router/dist/vue-router.esm-bundler.js:2866:16
install@webpack-internal:///./node_modules/vue-router/dist/vue-router.esm-bundler.js:3243:21
use@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3068:28
@webpack-internal:///./src/main.js:41:5
./src/main.js@http://localhost:8080/js/app.js:1636:1
__webpack_require__@http://localhost:8080/js/app.js:849:30
fn@http://localhost:8080/js/app.js:151:20
1@http://localhost:8080/js/app.js:1793:18
__webpack_require__@http://localhost:8080/js/app.js:849:30
checkDeferredModules@http://localhost:8080/js/app.js:46:23
@http://localhost:8080/js/app.js:925:18
@http://localhost:8080/js/app.js:928:10

Actual Solution

Didn't think of any workaround yet.

Expected Solution

It should just work as planned.

[David-Desmaisons]

I can not do nothing without at least the template you are using.

[denysaw]

Ok. But as I said any simple test templates are failing (all). Example: Model:

[David-Desmaisons]

What is the exception?

[denysaw]

What is the exception?

Console remains empty w/o no exceptions at all. But in browser on a place where component should've been appeared I see that long text I've pasted in the issue description (render/<.item<@webpack-internal:///./node_modules/cache-loader/dist...)

[denysaw]

Just FYI: I tried just for test this analog module: https://www.npmjs.com/package/vue-draggable-next and it worked as it should w/o that strange error. So it's not problem of my environment etc. Anyway I wanna use your module as more progressive and more supported one 🥇

[ChrisClsg]

Having the same error. I use Quasar though, currently running on Vue 3.0.11.

[David-Desmaisons]

@denysaw Do you have a repo with this error?

[OmgImAlexis]

Same issue here. I'm just trying the example from the README. I changed the name of the var but I doubt that's the issue here. I'm using vue3 with vite.

<draggable 
  v-model="users" 
  group="people" 
  @start="drag=true" 
  @end="drag=false" 
  item-key="id">
  <template #item="{user}">
    <div>{{user.name}}</div>
   </template>
</draggable>

[ksassnowski]

Can confirm that I'm getting the same error. I migrated from Vue 2 to Vue 3 and changed my examples according to the docs. Same error as the others.

[ksassnowski]

Alright, so I just figured out that the problem was that I was using the compatibility build via @vue/compat. If I completely switch over to Vue 3, either by removing the compat build or explicitly setting the MODE in the compatConfig to 3, the package works as expected

import { configureCompat } from "vue";

configureCompat({
    MODE: 3
});

I didn't bother figuring out which feature flag exactly causes this behavior but maybe this helps some of you folks out.

[roofranklin]

I have the same error. I use Vue 3

[thedarkside]

Run into this as well. Is there a workaround?

[snoozbuster]

I opened a PR which should resolve this for @vue/compat users. As a workaround, you can shim the draggable component directly using code similar to the following:

import Draggable from 'vuedraggable';

const FULLY_COMPATIBLE = { MODE: 3 };

export default function installComponentShims() {
  Draggable.compatConfig = FULLY_COMPATIBLE;
}

then call installComponentShims() somewhere in your app before the first time you use Draggable. This will modify the component and let @vue/compat know it can be rendered in Vue 3 mode.

[ogulcankarayel5]

I tried @snoozbuster but still getting error on template

[ogulcankarayel5]

I remove the @vue/compat and other things related to migration build. It is still same

[AlexDaniel]

Same error, but strangely I can't get the workaround to work. I'm not even sure where the compat stuff is coming from. I'm using Quasar.

[AlexDaniel]

~I think I figured out why the workaround is not working for me. My actual issue is resolved by https://github.com/SortableJS/vue.draggable.next/pull/46, it's a different bug.~

[ogulcankarayel5]

I remove the compat build completely, project works under the vue 3 but error is still same

[buzzclue]

This issue is caused when you change the prop name from element to something else. In all above mentioned examples OmgImAlexis is using user and denysaw is using item instead of element which logically make sense but the Draggable breaks with that.

Simply if you keep the template like this, there will be no issues.

<template #item="{ element }">
    <div>{{ element.someprop }}</div>
</template>

I hope this issue is addressed soon.

[AlexDaniel]

@buzzclue is correct. I was able to make it work by using element.

[ogulcankarayel5]

I was still getting this error even though I use "element" for item slot. My code was like this

 <draggable v-model="selectedQueues" item-key="key">
              <template #item="{ element }">
                  <div class="selected-queue__left">
                    <Icon name="drag" />
                    <span>{{ element.sequence }}. {{ element.value }}</span>
                  </div>
                  <div class="selected-queue__right">
                    //logic
                  </div>
              </template>
</draggable>

If you notice there isn't a root element in template and error was related to this issue. I wrap divs with another div and it works :D

[buzzclue]

@ogulcankarayel5 without root element the error is different but yes you get an error without root element.

[5knnbdwm]

This issue is caused when you change the prop name from element to something else. In all above mentioned examples OmgImAlexis is using user and denysaw is using item instead of element which logically make sense but the Draggable breaks with that.

Simply if you keep the template like this, there will be no issues.

<template #item="{ element }">
    <div>{{ element.someprop }}</div>
</template>

I hope this issue is addressed soon.

Thanks for this info. Solved the problem for me.

[joaoggnogueira]

same issue here on Nuxt 3, the draggable component breaks when I set up the item-key="id", but if I remove the problem goes

[jameswilddev]

I'm seeing this when migrating a legacy project from Vue 2 to Vue 3. I have no previous Vue experience so I'm not sure what I can provide to help getting to the bottom of this but I can confirm:

• I am not using vue compat.
• My template's item variable is called element.

[louisfoster]

If you want to use a name other than element, like user then do this: <template #item="{ element: user }"> This is useful when you're working with nested draggables.