Open
Description
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.
Metadata
Metadata
Assignees
Labels
No labels
Activity
[-]Getting some crazy random error directly in template DOM[/-][+]Getting some strange render error directly in template DOM[/+]David-Desmaisons commentedon Jun 10, 2021
I can not do nothing without at least the template you are using.
denysaw commentedon Jun 10, 2021
Ok. But as I said any simple test templates are failing (all). Example:


Model:
David-Desmaisons commentedon Jun 11, 2021
What is the exception?
denysaw commentedon Jun 11, 2021
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 commentedon Jun 11, 2021
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 commentedon Jun 11, 2021
Having the same error.
I use Quasar though, currently running on
Vue 3.0.11
.David-Desmaisons commentedon Jun 11, 2021
@denysaw Do you have a repo with this error?
OmgImAlexis commentedon Jul 12, 2021
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.
ksassnowski commentedon Aug 8, 2021
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 commentedon Aug 8, 2021
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 theMODE
in thecompatConfig
to3
, the package works as expectedI didn't bother figuring out which feature flag exactly causes this behavior but maybe this helps some of you folks out.
roofranklin commentedon Sep 10, 2021
I have the same error. I use Vue 3
thedarkside commentedon Feb 15, 2022
Run into this as well. Is there a workaround?
snoozbuster commentedon May 20, 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: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.compatConfig
to draggableComponent #152ogulcankarayel5 commentedon Jun 24, 2022
I tried @snoozbuster but still getting error on template
ogulcankarayel5 commentedon Jun 24, 2022
I remove the @vue/compat and other things related to migration build. It is still same
AlexDaniel commentedon Jun 24, 2022
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 commentedon Jun 26, 2022
I think I figured out why the workaround is not working for me. My actual issue is resolved by #46, it's a different bug.ogulcankarayel5 commentedon Jun 26, 2022
I remove the compat build completely, project works under the vue 3 but error is still same
buzzclue commentedon Jun 28, 2022
This issue is caused when you change the prop name from
element
to something else. In all above mentioned examples OmgImAlexis is usinguser
and denysaw is usingitem
instead ofelement
which logically make sense but the Draggable breaks with that.Simply if you keep the template like this, there will be no issues.
I hope this issue is addressed soon.
AlexDaniel commentedon Jun 28, 2022
@buzzclue is correct. I was able to make it work by using
element
.ogulcankarayel5 commentedon Jun 28, 2022
I was still getting this error even though I use "element" for item slot. My code was like this
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 commentedon Jun 28, 2022
@ogulcankarayel5 without root element the error is different but yes you get an error without root element.
5knnbdwm commentedon Jul 11, 2022
Thanks for this info. Solved the problem for me.
joaoggnogueira commentedon Nov 3, 2022
same issue here on Nuxt 3, the draggable component breaks when I set up the
item-key="id"
, but if I remove the problem goesjameswilddev commentedon Mar 23, 2023
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:
louisfoster commentedon May 3, 2024
If you want to use a name other than
element
, likeuser
then do this:<template #item="{ element: user }">
This is useful when you're working with nested draggables.
intredford commentedon Jul 29, 2024
None of the answers above solved the problem for me in my Nuxt3 project. It turned out that it was all because of the comment at the root of
<template>
.So I replaced this code
with this:
an the error was gone. I hope this helps someone.