Vue3 (vue-dndrop 1.2.9) Uncaught TypeError: createElement is not a function

[kamil-bartczak]

Problem

Uncaught TypeError: createElement is not a function

Description

I created a new project and installed only this package on it. I wanted to test its performance. I installed the vue-dndrop@next package Unfortunately, after copy the example I get an error

Versions

• "vue": "^3.2.13",
• "vue-dndrop": "^1.2.9"
• Browser: Chrome 103 on Linux

Stack

app.js:220 Uncaught TypeError: createElement is not a function
    at Proxy.render (vue-dndrop.esm.js?03c6:2903:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5580:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5708:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5490:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5448:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5038:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:5234:1)

Code

HelloWorld.vue

<template>
  <div>
   <div class="simple-page">
       <Container @drop="onDrop">
         <Draggable v-for="item in items" :key="item.id">
           <div class="draggable-item">
             {{item.data}}
           </div>
         </Draggable>
       </Container>
   </div>
 </div>
</template>

<script>
import { Container, Draggable } from 'vue-dndrop';
import { applyDrag, generateItems } from './utils';

export default {
 name: 'HelloWorld',
 components: { Container, Draggable },
 data() {
   return {
     items: generateItems(50, (i) => ({ id: i, data: `Draggable ${i}` })),
   };
 },
 methods: {
   onDrop(dropResult) {
     this.items = applyDrag(this.items, dropResult);
   },
 },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

utils.js

export const applyDrag = (arr, dragResult) => {
 const { removedIndex, addedIndex, payload } = dragResult;
 if (removedIndex === null && addedIndex === null) return arr;

 const result = [...arr];
 let itemToAdd = payload;

 if (removedIndex !== null) {
   // eslint-disable-next-line prefer-destructuring
   itemToAdd = result.splice(removedIndex, 1)[0];
 }

 if (addedIndex !== null) {
   result.splice(addedIndex, 0, itemToAdd);
 }

 return result;
};

export const generateItems = (count, creator) => {
 const result = [];
 for (let i = 0; i < count; i += 1) {
   result.push(creator(i));
 }
 return result;
};

[amendx]

@kamil-bartczak Hi, try again with @next tag. (version 1.2.11)

[amendx]

Updated bug on vue-dndrop 1.2.13 for vue3 and vue-dndrop 1.2.12 to vue2