How to Using Editor 20.5 in VUEJS 3 + VITE Project

jsimo

Hello everyone, today I am trying for the very first time to use Editor in a VueJS 3 + Vite project.

I'm facing an error that has been tormenting me for days.
Reminder: I am the owner of a version of Editor (Editor Version: 2.0.5)

Here is what I did

1- First, I installed the packages
npm i datatables.net-editor
npm i datatables.net-editor-dt

2 - Then in terminal I executed
node node_modules/datatables.net-editor/install.js Editor-2.0.5.zip
I received these messages successively
Editor NPM install script
Installing node_modules/datatables.net-editor-dt/css/editor.dataTables.css
Installing node_modules/datatables.net-editor-dt/css/editor.dataTables.min.css
Installing node_modules/datatables.net-editor/js/dataTables.editor.js
Installing node_modules/datatables.net-editor/js/dataTables.editor.min.js
Installing node_modules/datatables.net-editor-dt/js/editor.dataTables.js
Installing node_modules/datatables.net-editor-dt/js/editor.dataTables.min.js
Done

3- In my .vue file here is my code
<template>
<button @click="addFirstName">Add First Name</button>
</template>

import Editor from "datatables.net-editor"; const editorFirstName = new Editor({ fields: [ { label: 'Fist Name:', name: 'firstname', type : 'text', }, ] }) const addFirstName = ()=> { editorFirstName.create({ title : "Add First Name" }) // }

4- This is the error I get
chunk-5WY747RP.js?v=25866300:24 Uncaught (in promise) TypeError: (init_dataTables(...) , __toCommonJS(...)) is not a function
at new module.exports (chunk-5WY747RP.js?v=25866300:24:70)
at setup (index.vue?t=1715006346139:11:33)
at callWithErrorHandling (chunk-BGIVCXY2.js?v=25866300:1750:18)
at setupStatefulComponent (chunk-BGIVCXY2.js?v=25866300:7767:25)
at setupComponent (chunk-BGIVCXY2.js?v=25866300:7728:36)
at mountComponent (chunk-BGIVCXY2.js?v=25866300:6365:7)
at processComponent (chunk-BGIVCXY2.js?v=25866300:6331:9)
at patch (chunk-BGIVCXY2.js?v=25866300:5804:11)
at ReactiveEffect.componentUpdateFn [as fn] (chunk-BGIVCXY2.js?v=25866300:6474:11)
at ReactiveEffect.run (chunk-BGIVCXY2.js?v=25866300:1408:23)

Please can someone help me??

allan

__toCommonJS(...)) is not a function

Sounds like a bundler issue. What are you using - Vite or something else? Are you able to create a demo repo showing the issue that I can take a look at?

Allan

jsimo

I created a git repository with the project
https://github.com/jsimo237/dt-editor-vue3.git