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.