vue.draggable.next: Getting some strange render error directly in template DOM

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.

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 3
  • Comments: 25 (3 by maintainers)

Most upvoted comments

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.

+2
buzzclue on Jun 28, 2022

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.

+2
snoozbuster on May 20, 2022
Read more comments on GitHub
← vue.draggable.next: Clone - allow duplicates and how to key by index?
vue.draggable.next: TypeError: Cannot set properties of null (setting '__draggable_context') →