Ckeditor5: Error duplicate when import Mention in React

[funkymed]

Hello,

I'm creating a React App, it works fine with the CKEditorClassic, but when i import Mention i have that message

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

![image](https://user-images.githubusercontent.com/487326/63778892-f54c6000-c8e5-11e9-803d-8220c86927b0.png)

Here is what i import

```javascript
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Mention from '@ckeditor/ckeditor5-mention/src/mention';

and here is what i have in my package about ckeditor and the versions details

    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
    "@ckeditor/ckeditor5-build-classic": "^12.4.0",
    "@ckeditor/ckeditor5-mention": "12.0.1",
    "@ckeditor/ckeditor5-react": "^1.1.3",

And here when i create the editor

ClassicEditor
      .create(document.querySelector(`#my-id`), {
        plugins: [Mention],
        mention: {
          feeds: [
            {
              marker: '@',
              minimumCharacters: 1,
              feed: ['@test1', '@test2'],
            }
          ],
        },
      })
    ;

Do you have any idea of my problem ?

Thanks for your help

Cyril

[Reinmar]

Hi! You can't add a plugin to an existing build. A plugin must be added before a bundling step (build is already bundled).

See https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#integrating-ckeditor-5-built-from-source and you can also scan https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html.

[funkymed]

Thanks @Reinmar
It works !

The problem was for me from the documentation here https://ckeditor.com/docs/ckeditor5/latest/examples/framework/chat-with-mentions.html

import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Mention from '@ckeditor/ckeditor5-mention/src/mention';

The source from npm don't bring the src directory. Know i understand.

Regards

[Reinmar]

Thanks for pointing that out. There's a mistake in this code sample 🤦‍♂ It should be ckeditor5-editor-classic. Gonna fix it.

[Reinmar]

Done in b6bccad.

[humanPursuit]

Hello. Forgive me for my poor English.

Same code as chat-with-mentions.md.

The latest sample code doesn't seem to work.
No Reactions to typing, then i added ckeditor5-essentials, but got error model-nodelist-offset-out-of-bounds.

and here is package.json

    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
    "@ckeditor/ckeditor5-build-classic": "^12.4.0",
    "@ckeditor/ckeditor5-dev-utils": "^12.0.5",
    "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
    "@ckeditor/ckeditor5-essentials": "^11.0.5",
    "@ckeditor/ckeditor5-mention": "^13.0.0",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "@ckeditor/ckeditor5-theme-lark": "^14.2.0",

Did i missing the point?

Thanks for your help

[Mgsy]

Hi, @humanPursuit! I've analyzed the code in chat-with-mentions guide and I can see it's missing some key plugins, like Paragraph and Essentials.

Your issue occurs, because you're missing the Paragraph plugin. Try to install it, rebuild the editor and see if it helps.

I've created the issue for this case - https://github.com/ckeditor/ckeditor5/issues/2042.

[Reinmar]

A corrected version of https://ckeditor.com/docs/ckeditor5/latest/examples/framework/chat-with-mentions.html was published.

[humanPursuit]

Thanks for your help.
Best regards.