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

[Chainery]

CKEditor5 v36.0.1 cannot use this plugin. please help me solve this question. thx

My CKEditor.js code

`/**

• @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
• For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */

// The editor creator to use.
import DecoupledEditorBase from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKBox from '@ckeditor/ckeditor5-ckbox/src/ckbox';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import PictureEditing from '@ckeditor/ckeditor5-image/src/pictureediting';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices';

import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

import FileUpload from "@emagtechlabs/ckeditor5-file-upload/fileupload";
import SimpleFileUploadAdapter from "@emagtechlabs/ckeditor5-file-upload/src/simplefileuploadadapter";

export default class DecoupledEditor extends DecoupledEditorBase {}

// Plugins to include in the build.
DecoupledEditor.builtinPlugins = [
Essentials,
Alignment,
FontSize,
FontFamily,
FontColor,
FontBackgroundColor,
UploadAdapter,
Autoformat,
Bold,
Italic,
Strikethrough,
Underline,
BlockQuote,
CKBox,
CKFinder,
CloudServices,
EasyImage,
Heading,
Image,
ImageCaption,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Link,
List,
ListProperties,
MediaEmbed,
Paragraph,
PasteFromOffice,
PictureEditing,
Table,
TableToolbar,
TextTransformation,

FileUpload,
SimpleFileUploadAdapter,

CodeBlock  

];

// Editor configuration.
DecoupledEditor.defaultConfig = {
simpleFileUpload: {
url: 'http://my-custom-link.com',
withCredentials: true,
headers: {
'X-CSRF-TOKEN': 'CSRF_TOKEN',
Authorization: 'Bearer ',
},
fileTypes: [
'.pdf',
'.doc',
'.docx',
'.xls',
'.xlsx'
]
},

toolbar: {
	items: [
		'heading',
		'|',
		'fontfamily',
		'fontsize',
		'fontColor',
		'fontBackgroundColor',
		'|',
		'bold',
		'italic',
		'underline',
		'strikethrough',
		'|',
		'alignment',
		'|',
		'numberedList',
		'bulletedList',
		'|',
		'outdent',
		'indent',
		'|',
		'link',
		'blockquote',
		'uploadImage',
		'insertTable',
		'mediaEmbed',
		'|',
		'undo',
		'redo',


		'fileUpload',
		'codeBlock'
	]
},
image: {
	resizeUnit: 'px',
	toolbar: [
		'imageStyle:inline',
		'imageStyle:wrapText',
		'imageStyle:breakText',
		'|',
		'toggleImageCaption',
		'imageTextAlternative'
	]
},
table: {
	contentToolbar: [
		'tableColumn',
		'tableRow',
		'mergeTableCells'
	]
},
list: {
	properties: {
		styles: true,
		startIndex: true,
		reversed: true
	}
},
// This value must be kept in sync with the language defined in webpack.config.js.
language: 'en'

};
`

[Chainery]

it's hard to me ,spend one day , still error

[plsdev89]

@Chainery If you are using ckeditor v36.0.1, you need same version of ckeditor5-file-upload.
You can simply update package.json for that.

[criptocoko]

was this solved for v36.01?? for me updating the package.json of ckeditor5-file-upload does not fix the error.

[sftl]

Hi everybody

This module is still working, at least for CKEditor 5 v39.0.2
Here you have the steps to make it works, it took me a couple of hours to fix it.

1. I assume that you are building your editor from a src/ckeditor.ts with npm run build, as mention in https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html#adding-a-plugin-to-an-editor

2. npm i @emagtechlabs/ckeditor5-file-upload

3. Before to run: npm run build, you have to update the ckeditor5-file-upload plugin because it depends on CKEditor 5 v17.0.0 as mention in the package.json.

• Delete ./node_modules/@emagtechlabs/ckeditor5-file-upload/node_modules directory
• Go to ./node_modules/@emagtechlabs/ckeditor5-file-upload/src/simplefileuploadadapter.js and replace all instances of attachLinkToDocumentation by logWarning
• Go to ./node_modules/@emagtechlabs/ckeditor5-file-upload/src/utils.js and replace all instances of findOptimalInsertionPosition by findOptimalInsertionRange

4. In your src/ckeditor.ts:

• Import the modules

    // @ts-ignore
    import FileUpload from "@emagtechlabs/ckeditor5-file-upload/fileupload";
    // @ts-ignore
    import SimpleFileUploadAdapter from "@emagtechlabs/ckeditor5-file-upload/src/simplefileuploadadapter";
  

  Do not delete the // @ts-ignore comments they are important

• Update your builtinPlugins

  public static override builtinPlugins = [
       ...
       FileUpload,
       SimpleFileUploadAdapter,
       ...
  ]
  

• Update your defaultConfig

     simpleFileUpload: {
       url: 'http://my-custom-link.com',
       withCredentials: true,
       headers: {
         'X-CSRF-TOKEN': 'CSRF_TOKEN',
         Authorization: 'Bearer <JSON Web Token>',
       },
       fileTypes: [
         '.pdf',
         '.doc',
         '.docx',
         '.xls',
         '.xlsx'
       ]
     },
  

5. npm run build

Hope this helps

Cheers
Fran