Ckeditor5: CK Editor 5 + Vue JS + Using component locally + build from source = duplicated

[signmeuptwice]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

Version 5

"@ckeditor/ckeditor5-adapter-ckfinder": "^11.0.1",
"@ckeditor/ckeditor5-alignment": "^11.1.0",
"@ckeditor/ckeditor5-autoformat": "^11.0.1",
"@ckeditor/ckeditor5-basic-styles": "^11.1.0",
"@ckeditor/ckeditor5-block-quote": "^11.0.1",
"@ckeditor/ckeditor5-dev-utils": "^12.0.1",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
"@ckeditor/ckeditor5-easy-image": "^11.0.1",
"@ckeditor/ckeditor5-editor-classic": "^12.1.0",
"@ckeditor/ckeditor5-essentials": "^11.0.1",
"@ckeditor/ckeditor5-heading": "^11.0.1",
"@ckeditor/ckeditor5-image": "^13.0.1",
"@ckeditor/ckeditor5-link": "^11.0.1",
"@ckeditor/ckeditor5-list": "^12.0.1",
"@ckeditor/ckeditor5-paragraph": "^11.0.1",
"@ckeditor/ckeditor5-theme-lark": "^13.0.1",
"@ckeditor/ckeditor5-undo": "^11.0.1",
"@ckeditor/ckeditor5-build-classic": "^12.1.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^12.1.0",
"@ckeditor/ckeditor5-highlight": "^11.0.1",
"@ckeditor/ckeditor5-media-embed": "^11.1.0",
"@ckeditor/ckeditor5-mention": "^10.0.0",
"@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",

📋 Steps to reproduce

1. build editor from source
2. insert in vue.js components

✅ Expected result

no duplicates

❎ Actual result

ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

📃 Other details that might be useful

I have a set of components in my page like this:

BlogEntryPointComponent that contains NewBlogComponent and BlogEditComponent

both NewBlogComponent and BlogEditComponent use the following code:

import BlogEditor from '../../../../js/ckeditor/blogeditor.ts'

export default {
    components:{
        ckeditor: BlogEditor.ckeditor
    },
    data(){
        return{
           editor: BlogEditor.editor,
           editorConfig: BlogEditor.config
        }
    },

here is the BlogEditor code

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapterPlugin from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import AlignmentPlugin from '@ckeditor/ckeditor5-alignment/src/alignment';
import EmbedPlugin from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import MentionPlugin from '@ckeditor/ckeditor5-mention/src/mention';
import HighlightPlugin from '@ckeditor/ckeditor5-highlight/src/highlight'

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import CKEditor from '@ckeditor/ckeditor5-vue/dist/ckeditor.js'

export default {

    ckeditor: CKEditor.component,

    editor:ClassicEditorBase,

    config:{
        plugins: [
            EssentialsPlugin,
            BoldPlugin,
            ItalicPlugin,
            LinkPlugin,
            ParagraphPlugin,
            AlignmentPlugin,
            ListPlugin,
            HeadingPlugin,
            BlockQuotePlugin,
            AutoformatPlugin,
            UploadAdapterPlugin,
            EmbedPlugin,
            MentionPlugin,
            HighlightPlugin
        ],

        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'alignment',
                'link',
                'bulletedList',
                'numberedList',
                'mediaEmbed',
                'blockQuote',
                'highlight',
                'undo',
                'redo'
            ]
        }
    }

}

so now I mount BlogEntryPointComponent and all the editors work except that errorckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated is showing in the console

The error page help talks about using two different builds on one page; I guess I am in this case... but those are are two different independent components; how can this be ?

I have done as mentioned in the doc and in the error page; my editors are built from source and I am using local component injection; why do I have this recurring problem ?

[152016726]

I got the same problem with you. so I just follow the examples from https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#configuring-vueconfigjs

[signmeuptwice]

I got the same problem with you. so I just follow the examples from https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#configuring-vueconfigjs

Yes I followed all that but there is nothing in there helping my problem; did you manage to find a solution ? Only difference is that I am using vanilla webpack as my site is hybrid vue/symfony

[mlewand]

Related issue #667 and #1821.

[mlewand]

Actually it will be fixed by #667, so please watch this issue.