Custom build prints "Some CKEditor 5 modules are duplicated" to console

[agronick]

I've confirmed that this isn't anything to do with my environment. With a simple setup with only the following imports

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import Editor from '@ckeditor/ckeditor5-vue';

I get several lines of "log.js?f27c:57 ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more:" printed to my console. I am unable to find anything in my Vue config or package.json that is causing this.

Here is a repository where you can see the issue: https://github.com/agronick/ckeditor-import-example

Even with nothing else besides the EseentialsPlugin and the ClassicEditor imported the messages are still printed to the console.

[jodator]

I can see that ckeditor5-vue wasn't updated to the latest versions of the packages and there are packages required in two different versions. First checked was "ckeditor5-build-classic": yours is "12.1.0" and vue's one is: "^11.0.1". So it might looks like before the ckeditor5-vue will not get updated you should use older packages for vue builds.

[agronick]

From my understanding, it shouldn't be loading any build since I am making my own build. It should just be importing classic editor only.

I don't know if the upgrade causes the error or they just added the error message in the newest version.

[agronick]

The docs don't say to install any specific version. And the CKEditor Vue plugin doesn't import an editor or a build. It seems like the issue is with the webpack plugin. Apparently it takes whatever it can get out of node_modules even if it is redundant.

[agronick]

I've been messing around with this and it really is confusing. I have two folders with identical package.json files. I can rm -rf node_modules && npm install in both of them. They both have the latest packages. When I run the Vue project, one of them displays the error messages and one of them doesn't. With the exact same package.json file they both produced different package-lock.json files.

The issue only went away when I removed both package-lock.json and node_modules at the same time. It seems that package-lock.json is a function of the contents of both package.json and node_modules. Doing an upgrade puts it in an inconsistent state. And removing just node_modules or just package-lock.json isn't enough to fix it. You need to remove both at the same time.

I'm sure this points to a deeper issue but it seems I have a way to rectify it for now. Maybe a note should be placed on the page for that error message to remove package-lock.json and node_modules if someone is seeing that message.

[penblog-io]

This also happened to me at the moment, had been testing, reinstalling multiple times until I found this thread.

The issue only went away when I removed both package-lock.json and node_modules at the same time.

This save my day, thank you.

[usb248]

I removed both package-lock.json, node_modules and the error is still here

[agronick]

I'm noticing it to with the newest version. It seems that removing the Table module gets rid of it but I don't see the table module importing anything I'm already importing.

[SimonHamermesh]

Similar. I think I installed a few weeks ago, about 3, everything has been running smoothly. Moved it to a cicd environment, new npm install, new package.locks. errors. Saw this thread earlier and cleaned up shop, now I'm getting the errors too. Was playing with all types of npm/webpack config.

[tymolls]

I’ve just tried to install the alignment plugin and got the same error. I have CK Editor classic installed and no other plugins. Tayo Ademolu

…

On 6 Sep 2019, at 02:57, Simon Hamermesh ***@***.***> wrote: Similar. I think I installed a few weeks ago, about 3, everything has been running smoothly. Moved it to a cicd environment, new npm install, new package.locks. errors. Saw this thread earlier and cleaned up shop, now I'm getting the errors too. Was playing with all types of npm/webpack config. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[kgrosvenor]

I'm pretty sure you are not meant to just remove package-lock.json in js dev unless you are willing to update all the other libraries / risk bugs creeping in...

[adamerose]

Check your package.json - I get this error if I try using multiple plugins that aren't all from the same version of CKEditor, which happens automatically sometimes if you just npm install...

[4unkur]

In my scenario I am trying to use 2 builds:

    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^19.0.2",
        "@ckeditor/ckeditor5-build-decoupled-document": "^19.0.2",
        "@ckeditor/ckeditor5-vue": "^1.0.1",

There are 2 components:
QuestionComponent.vue and DocumentWysiwyg.vue.
Both are registered globally i.e. Vue.component(...)
These components used in totally different pages, but the error message is still shown on the console and nothing works.

I also tried to get rid of ckeditor/ckeditor5-build-decoupled-document (as ckeditor/ckeditor5-build-classic was used earlier and it worked fine) and try to build manually via

import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled';

But still, the error is still shown.
So what I am thinking is you can use only 1 build per project or am I missing something?

[FilipTokarski]

@4unkur That's a correct behaviour. Here you can read how to use two or more editors and create superbuilds.

[JMA12]

Solved this by removing node_modules on a plugin used on my custom build before building the entire classic editor instance. Hope this helps.

[JMA12]

Solved this by removing node_modules on a plugin used on my custom build before building the entire classic editor instance. Hope this helps.

Also exclude node modules on webpack config of your custom build

[jeanhillesheim]

I had the same error with alignment plugin. In my case all the others plugins I had installed were version 19.0.0 and npm install --save-dev @ckeditor/ckeditor5-alignment was installing version 20.0.0. Changing it to version 19.0.0 solved the issue.

[simonj]

I had the same issue when I was trying to use CKEditor in my .vue component.
The default build has an "image upload" feature. but there I no Adapter included (don't know why)

So I had to clone the repo as described in the doc (https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html)
Repo I cloned: https://github.com/ckeditor/ckeditor5-build-classic

I added this adapter (https://www.npmjs.com/package/@ckeditor/ckeditor5-upload) but every time I did an rm -rf node_modules and removed the package-lock.json file and did an npm install && npm run build pushed the code, pulled it down on my project it said CKEditor-duplicated-modules https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

There was nothing in that description that helped me So I found this issue and @jeanhillesheim said that it could be something with the versions installed. ckeditor5-upload was version 20.0.0 so I downgraded to 19.0.0 did all the same with removing node_modules, etc. and now it works.

So
To help future people. This is my setup on my project with my .vue component that is using CKEditor with image upload (Simple adapter) https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

This is my code

Package.json

"dependencies": {
    "@ckeditor/ckeditor5-build-classic": "github:SimonJ/ckeditor5-build-classic#stable",
    "@ckeditor/ckeditor5-vue": "^1.0.1",
}

app.js

import Vue from 'vue'
import CKEditor from '@ckeditor/ckeditor5-vue'

Vue.use(CKEditor)

VueComponent.vue

<template>
<div>
<ckeditor v-model="textBlock" :editor="editor" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

export default {
data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        heading: {
          options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
            { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
            { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
            { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
            { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' },
          ],
        },
        mediaEmbed: {
          previewsInData: true,
        },
        simpleUpload: {
          uploadUrl: '/files',
          headers: {
            'X-CSRF-TOKEN': window.Laravel.csrfToken,
          },
        },
        link: {
          addTargetToExternalLinks: true,
        },
      },
}
}
}

[Mgsy]

As the original problem seems to be solved, I'm closing this issue.