Duplicate Modules

[iamshulz]

Hello I'm using Vite with Vue 3

I have this issue even though I've followed the documentation

Package.json (I have removed ckeditor5-build-classic already)

"dependencies": {
    "@adamdehaven/vue-custom-tooltip": "^2.5.1",
    "@ckeditor/ckeditor5-basic-styles": "^29.2.0",
    "@ckeditor/ckeditor5-editor-classic": "^29.2.0",
    "@ckeditor/ckeditor5-essentials": "^29.2.0",
    "@ckeditor/ckeditor5-link": "^29.2.0",
    "@ckeditor/ckeditor5-markdown-gfm": "^29.2.0",
    "@ckeditor/ckeditor5-paragraph": "^29.2.0",
    "@ckeditor/ckeditor5-theme-lark": "^29.2.0",
    "@ckeditor/ckeditor5-vue": "2.0.1",
    "@iconify/iconify": "2.0.3",
    "@mapbox/mapbox-gl-geocoder": "4.7.2",
    "@popperjs/core": "2.9.2",
    "@vueform/multiselect": "2.0.1",
(...)

Component

<script setup lang="ts">
//ckeditors
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'

//ckeditor
const editor = ClassicEditor
const editorData = ref(
  `<h2>The three greatest things you learn from travelling</h2>`
)
const configck = {
  plugins: [Essentials, Paragraph, Bold, Italic],
  items: ['bold', 'italic', 'link', 'undo', 'redo'],
}
</script>

<template>
 <V-Control>
                <ckeditor
                  v-model="editorData"
                  :editor="editor"
                  :config="configck"
                 >
          </ckeditor>
</V-Control>
</template>

[Mgsy]

Hi! Did you try to remove node_modules and package-lock.json, then reinstalling the packages?

[iamshulz]

Hi! Did you try to remove node_modules and package-lock.json, then reinstalling the packages?

Yes I have reinstalled it and it now displays the page but it has no plugins/tools.

updated config

const configck = {
  plugins: [Essentials, Paragraph, Bold, Italic],

  toolbar: {
    items: ['bold', 'italic', 'link', 'undo', 'redo'],
  },
}

[iamshulz]

Update I also have remove 'link' because its not included on the import but still same error.

Is there something wrong on how I have declared configck ? The problem mostly persists because of the 'toolbar'

I think it cannot located the svg because the query selector cannot find it. resulting to this error. Does it mean the svg is not mounted to the dom?

[iamshulz]

Would like to ask if this step is needed to use the classic editor from source? Editor-From-Source because I have skipped this part. I am using Vuejs with Vite not only Vue so this is the only step I've proceeded Using-The-Editor-From-Source