Ckeditor5: InlineEditor source build + HorizontalLine plugin fails

[eleave]

I'm trying to create a custom build with InlineEditor and use plugins. For example, i chose Horizontal Line Plugin. And there is an error with dublicated modules. Can you tell me what I'm doing wrong and how to fix it?

import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';  

My test repository is here:
https://github.com/eleave/laravel-vue-ckeditor

• webpack settings: https://github.com/eleave/laravel-vue-ckeditor/blob/master/webpack.mix.js
• set vue components: https://github.com/eleave/laravel-vue-ckeditor/blob/master/resources/js/app.js
• init editor: https://github.com/eleave/laravel-vue-ckeditor/blob/master/resources/js/components/Editor.vue

📝 Provide detailed reproduction steps

1. Create a new custom InlineEditor build
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source

I use Laravel + Vue, so i also made this:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

2. Import HorizontalLine plugin
https://ckeditor.com/docs/ckeditor5/latest/features/horizontal-line.html

3. Launch webpack script
npm run dev

You'll see the error in the browser console, and if you'll remove the line: import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; in Editor.vue, than everything will be fine.

✔️ Expected result

CKEditor 5 works correctly with Horizontal Line plugin

❌ Actual result

Error message:
ckeditorerror.js:66 Uncaught CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.

[ma2ciek]

Hi @eleave,

Are you sure that all deps are up to date? Do you build only source code and only once together?

[eleave]

Hi @ma2ciek
Yep, I think so. It's a fresh project. Also I've tried to delete _node_modules_ folder and reinstall npm again. This is deps package.json: https://github.com/eleave/laravel-vue-ckeditor/blob/master/package.json

```
"devDependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "^11.0.5",
"@ckeditor/ckeditor5-autoformat": "^11.0.5",
"@ckeditor/ckeditor5-basic-styles": "^11.1.4",
"@ckeditor/ckeditor5-block-quote": "^11.1.3",
"@ckeditor/ckeditor5-ckfinder": "^11.0.5",
"@ckeditor/ckeditor5-core": "^12.3.0",
"@ckeditor/ckeditor5-dev-utils": "^12.0.0",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.5",
"@ckeditor/ckeditor5-easy-image": "^11.0.5",
"@ckeditor/ckeditor5-editor-inline": "^12.3.0",
"@ckeditor/ckeditor5-essentials": "^11.0.5",
"@ckeditor/ckeditor5-heading": "^11.0.5",
"@ckeditor/ckeditor5-horizontal-line": "^15.0.0",
"@ckeditor/ckeditor5-image": "^14.0.0",
"@ckeditor/ckeditor5-indent": "^10.1.0",
"@ckeditor/ckeditor5-link": "^11.1.2",
"@ckeditor/ckeditor5-list": "^12.1.0",
"@ckeditor/ckeditor5-media-embed": "^11.1.4",
"@ckeditor/ckeditor5-paragraph": "^11.0.5",
"@ckeditor/ckeditor5-paste-from-office": "^11.1.0",
"@ckeditor/ckeditor5-table": "^14.0.0",
"@ckeditor/ckeditor5-theme-lark": "^14.2.0",
"@ckeditor/ckeditor5-vue": "^1.0.0",

And here is the build inits only once, Editor.vue file:
https://github.com/eleave/laravel-vue-ckeditor/blob/master/resources/js/components/Editor.vue

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

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
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 Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
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 Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
```

When i remove HorizontalLine import from here, than editor works fine.

[ma2ciek]

Recently we released version 15 of almost all @ckeditor packages. So the easiest way for you would be to update all @ckeditor deps in package.json to version "^15.0.0" (despite independent framework integration and inspector packages like @ckeditor/ckeditor5-vue).

~Alternatively, if you want to keep the previous version, then install the previous version of the @ckeditor/ckeditor5-horizontal-line package.~ - it doesn't make sense since it was the first release of this package.

This error was introduced to tell you that your node_module packages are duplicated. Unfortunately, it results in the incorrect build, some of the CKEditor 5 plugins that are singletons are imported separately multiple times (plus the duplication increases the build size dramatically, causes also CSS issues, and so on).

See https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/versioning-policy.html.

[eleave]

It does work!
Thanks for response. I have updated all the deps:

Now I see that news :)
https://ckeditor.com/blog/CKEditor-5-v15.0.0-with-horizontal-line-page-break-responsive-toolbar-and-SVG-upload-support/