Skip to content

Getting some strange render error directly in template DOM #57

Open
@denysaw

Description

@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.

Activity

changed the title [-]Getting some crazy random error directly in template DOM[/-] [+]Getting some strange render error directly in template DOM[/+] on Jun 9, 2021
David-Desmaisons

David-Desmaisons commented on Jun 10, 2021

@David-Desmaisons
Member

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

denysaw

denysaw commented on Jun 10, 2021

@denysaw
Author

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

David-Desmaisons

David-Desmaisons commented on Jun 11, 2021

@David-Desmaisons
Member

What is the exception?

denysaw

denysaw commented on Jun 11, 2021

@denysaw
Author

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

denysaw commented on Jun 11, 2021

@denysaw
Author

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

ChrisClsg commented on Jun 11, 2021

@ChrisClsg

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

David-Desmaisons

David-Desmaisons commented on Jun 11, 2021

@David-Desmaisons
Member

@denysaw Do you have a repo with this error?

OmgImAlexis

OmgImAlexis commented on Jul 12, 2021

@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>

Screen Shot 2021-07-12 at 6 02 24 pm

ksassnowski

ksassnowski commented on Aug 8, 2021

@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

ksassnowski commented on Aug 8, 2021

@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

roofranklin commented on Sep 10, 2021

@roofranklin

I have the same error. I use Vue 3

thedarkside

thedarkside commented on Feb 15, 2022

@thedarkside

Run into this as well. Is there a workaround?

snoozbuster

snoozbuster commented on May 20, 2022

@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.

linked a pull request that will close this issue on May 20, 2022
ogulcankarayel5

ogulcankarayel5 commented on Jun 24, 2022

@ogulcankarayel5

I tried @snoozbuster but still getting error on template

ogulcankarayel5

ogulcankarayel5 commented on Jun 24, 2022

@ogulcankarayel5

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

AlexDaniel

AlexDaniel commented on Jun 24, 2022

@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

AlexDaniel commented on Jun 26, 2022

@AlexDaniel

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

ogulcankarayel5 commented on Jun 26, 2022

@ogulcankarayel5

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

buzzclue

buzzclue commented on Jun 28, 2022

@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

AlexDaniel commented on Jun 28, 2022

@AlexDaniel

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

ogulcankarayel5

ogulcankarayel5 commented on Jun 28, 2022

@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

buzzclue commented on Jun 28, 2022

@buzzclue

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

5knnbdwm

5knnbdwm commented on Jul 11, 2022

@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

joaoggnogueira commented on Nov 3, 2022

@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

jameswilddev commented on Mar 23, 2023

@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

louisfoster commented on May 3, 2024

@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.

intredford

intredford commented on Jul 29, 2024

@intredford

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

<template #item="{ element }">
    <!-- this comment causes an error -->
    <span>{{ element }}</span>
</template>

with this:

<template #item="{ element }">
    <span>{{ element }}</span>
</template>

an the error was gone. I hope this helps someone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @David-Desmaisons@thedarkside@jameswilddev@ksassnowski@AlexDaniel

      Issue actions

        Getting some strange render error directly in template DOM · Issue #57 · SortableJS/vue.draggable.next