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