CKEditorError: ckeditor-duplicated-modules

[EternalPirate]

am I importing them in the wrong way?

import VideoUpload from "@visao/ckeditor5-video/src/videoupload.js";
import Video from "@visao/ckeditor5-video/src/video.js";
import VideoResize from "@visao/ckeditor5-video/src/videoresize.js";
import VideoToolbar from "@visao/ckeditor5-video/src/videotoolbar.js";
import VideoStyle from "@visao/ckeditor5-video/src/videostyle.js";

because the issue is definitely here.

I've tried to create a custom build exactly like in the doc https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html and + this video plugin

and because of this plugin, my app is crashed with "CKEditorError: ckeditor-duplicated-modules" error, when I remove the video plugin everything works fine.

here my changes to the default build

/**
 * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// The editor creator to use.
import InlineEditorBase from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
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 BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
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 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 Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
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 Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

import VideoUpload from "@visao/ckeditor5-video/src/videoupload.js";
import Video from "@visao/ckeditor5-video/src/video.js";
import VideoResize from "@visao/ckeditor5-video/src/videoresize.js";
import VideoToolbar from "@visao/ckeditor5-video/src/videotoolbar.js";
import VideoStyle from "@visao/ckeditor5-video/src/videostyle.js";

export default class InlineEditor extends InlineEditorBase {}

// Plugins to include in the build.
InlineEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    FileRepository,
    Alignment,
    Video,
    VideoToolbar,
    VideoUpload,
    VideoResize,
    VideoStyle
];

// Editor configuration.
InlineEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'alignment',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'indent',
            'outdent',
            '|',
            'imageUpload',

            'videoUpload',

            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:side',
            '|',
            'imageTextAlternative'
        ]
    },
    video: {
        upload: {
            types: ['mp4'],
            allowMultipleFiles: false,
        },
        styles: [
            'alignLeft', 'alignCenter', 'alignRight'
        ],

        // Configure the available video resize options.
        resizeOptions: [
            {
                name: 'videoResize:original',
                label: 'Original',
                icon: 'original'
            },
            {
                name: 'videoResize:50',
                label: '50',
                icon: 'medium'
            },
            {
                name: 'videoResize:75',
                label: '75',
                icon: 'large'
            }
        ],

        // You need to configure the video toolbar, too, so it shows the new style
        // buttons as well as the resize buttons.
        toolbar: [
            'videoStyle:alignLeft', 'videoStyle:alignCenter', 'videoStyle:alignRight',
            '|',
            'videoResize:50',
            'videoResize:75',
            'videoResize:original'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

[learningfe]

Same issue, I upgrade all dependencies which name begins with @ckeditor/, keep their versions same with node_modules/@ckeditor/ckeditor-build-classic, and it works now.

ckeditor5-video/package.json

"dependencies": {
    "@ckeditor/ckeditor5-clipboard": "^25.0.0",
    "@ckeditor/ckeditor5-core": "^25.0.0",
    "@ckeditor/ckeditor5-engine": "^25.0.0",
    "@ckeditor/ckeditor5-ui": "^25.0.0",
    "@ckeditor/ckeditor5-upload": "^25.0.0",
    "@ckeditor/ckeditor5-utils": "^25.0.0",
    "@ckeditor/ckeditor5-widget": "^25.0.0"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-basic-styles": "^25.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^24.0.2",
    "@ckeditor/ckeditor5-editor-classic": "^25.0.0",
    "@ckeditor/ckeditor5-enter": "^25.0.0",
    "@ckeditor/ckeditor5-essentials": "^25.0.0",
    "@ckeditor/ckeditor5-heading": "^25.0.0",
    "@ckeditor/ckeditor5-inspector": "^2.2.2",
    "@ckeditor/ckeditor5-list": "^25.0.0",
    "@ckeditor/ckeditor5-paragraph": "^25.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^25.0.0",
    "@ckeditor/ckeditor5-undo": "^25.0.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^4.0.2",
    "style-loader": "^1.3.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },

[developcreativo]

Solution?

[alexdaube]

A bit like Husky did here, the dependencies of your build need to fit the ones in this plugin. It's a bit of a pain with CKEditor as a whole. They might have fixed it though, I am not sure as I don't really keep up with their development.

That said, I just made a release that will work with 27.1.0. I will try to keep things more up to date, but I have been kinda busy in the past few months. Sorry if it caused any of you some pains.

[gombeh]

hi, I had a similar problem keep their versions CKEditor same with node_modules/@visao/ckeditor5-video/pakage.json and npm i

"@ckeditor/ckeditor5-adapter-ckfinder": "^28.0.0",
"@ckeditor/ckeditor5-autoformat": "^28.0.0",
"@ckeditor/ckeditor5-basic-styles": "^28.0.0",
"@ckeditor/ckeditor5-block-quote": "^28.0.0",
"@ckeditor/ckeditor5-ckfinder": "^28.0.0",
"@ckeditor/ckeditor5-cloud-services": "^28.0.0",
"@ckeditor/ckeditor5-dev-utils": "^25.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^25.4.5",
"@ckeditor/ckeditor5-editor-classic": "^28.0.0",
"@ckeditor/ckeditor5-essentials": "^28.0.0",
"@ckeditor/ckeditor5-heading": "^28.0.0",
"@ckeditor/ckeditor5-image": "^28.0.0",
"@ckeditor/ckeditor5-indent": "^28.0.0",
"@ckeditor/ckeditor5-link": "^28.0.0",
"@ckeditor/ckeditor5-list": "^28.0.0",
"@ckeditor/ckeditor5-media-embed": "^28.0.0",
"@ckeditor/ckeditor5-paragraph": "^28.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^28.0.0",
"@ckeditor/ckeditor5-table": "^28.0.0",
"@ckeditor/ckeditor5-theme-lark": "^28.0.0",
"@ckeditor/ckeditor5-typing": "^28.0.0",

[Macfa]

@gombeh you save me Thanks :)