Item slot props are empty, possibly due to source map errors

[StrikeAgainst]

I'm trying to run this basic component:

<template>
    <div>
        <Draggable v-model="list" item-key="id">
            <template #item="{item, index}">
                <span>{{ item.title }}</span>
                <span>{{ index }}</span>
            </template>
        </Draggable>
    </div>
</template>

<script setup>
    import {reactive} from "vue";
    import Draggable from 'vuedraggable'

    const list = reactive([
        {
            id: 0,
            title: 'title0',
        },
        {
            id: 1,
            title: 'title1',
        }
    ]);
</script>

While I expected this to print out the list contents in a row, instead it printed a stack trace like this:

<pre style="color: red;">computeNodes@webpack:///../node_modules/vuedraggable/dist/vuedraggable.umd.js?:4621:11
computeComponentStructure@webpack:///../node_modules/vuedraggable/dist/vuedraggable.umd.js?:4646:27
render@webpack:///../node_modules/vuedraggable/dist/vuedraggable.umd.js?:4767:57
renderComponentRoot@webpack:///../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?:1019:44
componentUpdateFn@webpack:///../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?:5136:57
run@webpack:///../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?:205:25
setupRenderEffect@webpack:///../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?:5262:9
...
</pre>

Reading the console, it shows me a warning regarding a missing source map:

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: webpack:///../node_modules/vuedraggable/dist/vuedraggable.umd.js?
Source map URL: vuedraggable.umd.js.map

When rendering the template just like this:

<Draggable v-model="list" item-key="id">
    <template #item="{item}">
        <span>{{ item }}</span>
    </template>
</Draggable>

...I just get empty spans instead

<div>
  <span data-draggable="true"></span>
  <span data-draggable="true"></span>
</div>

I am using the latest versions for all my packages which as of now are:

    vue: 3.2.31
    vuedraggable: 4.1.0
    webpack: 5.69.1

[sugubei]

Have you solved it?

[sugubei]

I don't know how to explain to you. After all, my English is not good, and I don't understand the principle. It all depends on translation.

[ChadKeating]

@sugubei thank you I had the same issue. For clarification, the element used in the docs and in the screenshot here, its a named value, it cant be renamed. It's not clear thats the case if you dont use the latest js regularly.