Vue 3 CKEditor 5 Add Plugins CodeBlock Error Duplicate Module

Question

I am trying to add CodeBlock plugin tu my editor, here is my component

<script setup>
    import { ref, reactive } from 'vue'
    import CKEditor from '@ckeditor/ckeditor5-vue'
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'

    const editor = ClassicEditor
    const ckeditor = CKEditor.component
    const editorConfig = {plugins :[CodeBlock]}
    const data = reactive({
        title :"judulnya",
        content:'<b>Isi Post ni bos</b>'
    })
    const submitPost = ()=>{
        let form = {...data}
        console.log(form)
    }
</script>
<template>
   <div class="container-fluid p-0">

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form @submit.prevent="submitPost">
                            <div class="mb-3">
                                <input type="text" v-model="data.title" class="form-control">
                            </div>
                            <div class="mb-3">
                                <ckeditor :config="editorConfig" :editor="editor" v-model="data.content"></ckeditor>
                            </div>
                            <button type="submit" class="btn btn-primary">Post</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</template>
<style>
.ck-editor__editable {min-height: 50vh;}
</style>

but when compiled i got error CKEditorError: ckeditor-duplicated-modules. I have read the documentation but almost all of the guidance is not in vue 3 style and i can't understand it well. In short term, how to add this plugin depends on my coding style?

Answer 1

The build package contains a file that is already compiled with webpack. This means that it contains all the necessary code.

However, the CodeBlock plugin also imports some of the modules from these packages. If you ask webpack to build such a project, you will end up with the modules included (and executed) twice - first, because they are included in the build package, and second, because they are required by CodeBlock.

You would need to create your own build, you can find the procedure to do this through the documentation, accessible here: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/installing-plugins.html

However CKEditor has foreseen this and offers an online builder that does the work for you and makes it easy (you choose your options and plugins). You can find it here:

https://ckeditor.com/ckeditor-5/online-builder/

And then, you just have to replace your imports by the one created with the official builder.