Ckeditor5: NPM update, new version causing error: "Some CKEditor 5 modules are duplicated"

[jcroucher]

👇

EDIT from @Reinmar: This issue should be resolved by now. See https://github.com/ckeditor/ckeditor5/issues/1821#issuecomment-549295401.

☝️

---

🐞 Bug report

💻 Version of CKEditor

@ckeditor/ckeditor5-core: ^12.1.1
@ckeditor/ckeditor5-engine: 13.1.1
@ckeditor/ckeditor5-ui: 13.0.0
@ckeditor/ckeditor5-utils: 12.1.1

📋 Steps to reproduce

My code has been working fine, until I did an NPM update.
I reverted the package files, deleted the node-modules directory, re init npm and it works again.
Just to confirm, I did another npm update and it breaks again.

This is the working version

@ckeditor/ckeditor5-editor-inline": {
  **"version": "12.1.0",**
  "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-editor-inline/-/ckeditor5-editor-inline-12.1.0.tgz",
  "integrity": "sha512-7GPerfMVqrru5xwpIbfFsFw1cz+6fnSPDsaE/lCLu0SwM3Th8AQFZpi3+pNrvuXTxGza6u+n7X9Mf6IaDP1f+w==",
  "dev": true,
  "requires": {
    **"@ckeditor/ckeditor5-core": "^12.1.0",
    "@ckeditor/ckeditor5-engine": "^13.1.0",
    "@ckeditor/ckeditor5-ui": "^12.1.0",
    "@ckeditor/ckeditor5-utils": "^12.1.0",
    "lodash-es": "^4.17.10"**
}


    "@ckeditor/ckeditor5-alignment": "^11.1.0",
    "@ckeditor/ckeditor5-basic-styles": "^11.1.0",
    "@ckeditor/ckeditor5-block-quote": "^11.0.1",
    "@ckeditor/ckeditor5-build-classic": "^12.1.0",
    "@ckeditor/ckeditor5-build-inline": "^12.1.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
    "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
    "@ckeditor/ckeditor5-editor-inline": "^12.1.0",
    "@ckeditor/ckeditor5-essentials": "^11.0.1",
    "@ckeditor/ckeditor5-font": "^11.1.0",
    "@ckeditor/ckeditor5-heading": "^11.0.1",
    "@ckeditor/ckeditor5-link": "^11.0.1",
    "@ckeditor/ckeditor5-list": "^12.0.1",
    "@ckeditor/ckeditor5-media-embed": "^11.1.0",
    "@ckeditor/ckeditor5-paragraph": "^11.0.1",
    "@ckeditor/ckeditor5-remove-format": "^10.0.0",
    "@ckeditor/ckeditor5-table": "^12.0.1",
    "@ckeditor/ckeditor5-theme-lark": "^13.0.1",
    "@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",

This version breaks

@ckeditor/ckeditor5-editor-inline": {
  **"version": "12.1.1",**
  "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-editor-inline/-/ckeditor5-editor-inline-12.1.1.tgz",
  "integrity": "sha512-ZmhF6t8FZIrsssCJ0wm47/S+OAsL0LgL9f5zOBfQHvcQtTCJDDYe+czSvBmZRQ2IR9oNB2WGYMXiF68KX4R1fA==",
  "dev": true,
  "requires": {
    **"@ckeditor/ckeditor5-core": "^12.1.1",
    "@ckeditor/ckeditor5-engine": "^13.1.1",
    "@ckeditor/ckeditor5-ui": "^13.0.0",
    "@ckeditor/ckeditor5-utils": "^12.1.1",
    "lodash-es": "^4.17.10"**
},

    "@ckeditor/ckeditor5-alignment": "^11.1.1",
    "@ckeditor/ckeditor5-basic-styles": "^11.1.1",
    "@ckeditor/ckeditor5-block-quote": "^11.1.0",
    "@ckeditor/ckeditor5-build-classic": "^12.2.0",
    "@ckeditor/ckeditor5-build-inline": "^12.2.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.1",
    "@ckeditor/ckeditor5-editor-classic": "^12.1.1",
    "@ckeditor/ckeditor5-editor-inline": "^12.1.1",
    "@ckeditor/ckeditor5-essentials": "^11.0.2",
    "@ckeditor/ckeditor5-font": "^11.1.1",
    "@ckeditor/ckeditor5-heading": "^11.0.2",
    "@ckeditor/ckeditor5-link": "^11.0.2",
    "@ckeditor/ckeditor5-list": "^12.0.2",
    "@ckeditor/ckeditor5-media-embed": "^11.1.1",
    "@ckeditor/ckeditor5-paragraph": "^11.0.2",
    "@ckeditor/ckeditor5-remove-format": "^10.0.1",
    "@ckeditor/ckeditor5-table": "^12.0.1",
    "@ckeditor/ckeditor5-theme-lark": "^13.0.1",
    "@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",

The error is

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

I also reduced my code to only the one include disabling all the plugins

import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor'

It still produced the duplicate modules error.

📃 Package Files

package-lock.json-BROKEN.txt
package-lock.json-WORKING.txt
package.json.txt

[jodator]

Looks like more problems related to this are arising: https://github.com/ckeditor/ckeditor5-vue/issues/72.
It's probably due to outdated ckeditor-vue package.

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.

[lfgstudios]

Any movement on this at all? Is there a workaround for this? I have a demo in two days and this couldn't have come up at a worse time...

[jcroucher]

Any movement on this at all? Is there a workaround for this? I have a demo in two days and this couldn't have come up at a worse time...

Revert your versions in package list. It is the only thing I found at the moment to get around the issue.
It should at least get you through the demo.

[lfgstudios]

I tried that, trying to push everything back to 11.x but didn't seem to do the trick. I ended up switching to a non-custom build for the time being. Just going to have to brush past the fancier features. :)

[TehWazzard]

I'm getting similar errors. I have noticed the npm dependancy resolution is doing something odd.

what I found is a package such as ckeditor5-image has a ckeditor5-widget requirement of ^11.02
however this was being resolved as ^11.0.3 somehow which has a different requirement of other packages such as ckeditor5-core. I'm assuming this defaults to the next stable minor version instead of the actual version you want.

I was relying on npm to resolve this for me - it seems it's better to add these packages manually.
running npm i @ckeditor/[email protected] seems to have reduced my duplicate count by 1
so I'm guessing that I just have go through this exercise and ensure that all packages (and their resolved dependancies) are pointing to the same ckeditor5-core version.

SOLUTION:
Ensure that the versions of ckeditor5-core and ckeditor5-engine are consistent throughout your package.lock.json (only 1 version number across all requirements)
in order to achieve this you will likely need to install the correct versions of those packages (the ones referencing other versions of core and engine) instead of relying on npm to resolve them.

UPDATE:
After running npm i @ckeditor/[email protected]
I had to uninstall and reinstall ckeditor5-essentials at version ^11.0.2 as the 12.1.1 reference for ckeditor5-typing was being stubborn.

And all conflicts have been resolved!
Note that I also use webpack to compile my own custom build from source.

To Conclude I don't think this is a ckeditor bug, but just unexpected behaviour from npm.

working package.json entries that generate the correct package.lock.json:
ckeditor-11x-working.txt

UPDATE:
I noticed that I am not using vue, even though I had a similar duplication error. Will someone that uses view try to apply my solution ?

[usb248]

Any news/fix ? Same error...

[cedx]

Same problem here.
Doing a clean install (i.e. rm -rf node_modules && npm install),
followed by a npm dedupe fixed the issue.

Reference project (with Node.js 12.9.1 and npm 6.10.2):
package.json

[usb248]

npm dedupe command change anything after removing node_modules and even package-lock

[Reinmar]

We changed the versioning policy when working on #1746 (which I think is a DUP of this ticket). The new policy is described in https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/versioning-policy.html and should prevent many situations in which npm/yarn will install duplicated packages. The tl;dr is that all CKE5 packages will now be in the same major version (similar to babel and angular).

I'm closing this ticket, assuming that the change will help for the issue described here too. Please correct me if I'm wrong.

[zhangkuiworld]

@Reinmar So, what's the final solution ？I can't fix this bug in any way now. Can you update a version to fix this bug.

[tanmaymishu]

Same issue here!

[Raggaer]

Same issue, even only importing the Essentials plugin gives me this error.

[syntheticgoo]

We changed the versioning policy when working on #1746 (which I think is a DUP of this ticket). The new policy is described in https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/versioning-policy.html and should prevent many situations in which npm/yarn will install duplicated packages. The tl;dr is that all CKE5 packages will now be in the same major version (similar to babel and angular).

I'm closing this ticket, assuming that the change will help for the issue described here too. Please correct me if I'm wrong.

Problem still exists. Specifically for me npm will install ckeditor5-editor-classic ^15.0.0.0, but install ckeditor5-image ^16.0.0

[ChristophWurst]

Hi, I can confirm that this is still an issue.

[Ethaan]

getting in this React, by just installing the Mention plugin with the ballon plugin

const CKEditor = require('@ckeditor/ckeditor5-react');
const BallonEditor = require('@ckeditor/ckeditor5-build-balloon-block');
// const Mention = require('@ckeditor/ckeditor5-mention/src/mention');

[shavidze]

Don't import any modules which are included in the build.

you can use them without import

[kyle-ssg]

Getting this simply trying to add the font plugin, all I want to do is have the ClassicEditor + the ability to select font colour...

            <CKEditor
              config={{
                  plugins: [
                      ...ClassicEditor.builtinPlugins,
                      require('@ckeditor/ckeditor5-font/src/font')
                  ],
                  toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'],
              }}
              editor={ClassicEditor}

[robclancy]

Make sure everything is the same version. Then if you have issues still then you need to tell yarn/npm not to get multiple versions.
You can see where I have had to do this for a custom fork:

  "resolutions": {
    "@ckeditor/ckeditor5-upload": "https://github.com/robclancy/ckeditor5-upload.git#patch-2"
  },

Find the duplicate module (check for nested node_modules in the @ckeditor directory) and force them to the correct version.

This information should be part of the error. In fact I think the error should say the different versions that have been loaded.

[ma2ciek]

Hi!

There's a great tool - https://www.npmjs.com/package/npm-check-updates - that can check if all your @ckeditor/ckeditor5-* packages are at the same version.

Also, there's a plan to work on the webpack plugin that could check and distinguish most of the duplication errors on the compilation time, so it'd give more accurate hints about the reason of this error - https://github.com/ckeditor/ckeditor5/issues/1692.

[sandeepbalagopal09]

This worked for me https://github.com/ckeditor/ckeditor5-vue/issues/72#issuecomment-502483223