Ckeditor5-react: react, typescript, ckeditor-duplicated-modules

[c1trons]

After trying for a few hours im out of ideas.
followed the react quick start guide to the point, with the only change being that I added very basic typings to make the imports work.

copied npm command

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

added the basic typings:

declare module '@ckeditor/ckeditor5-react' {
    const CKEditor: any;
    export default CKEditor;
}

declare module '@ckeditor/ckeditor5-build-classic' {
    const ClassicEditor: any;
    export = ClassicEditor;
}

so i have in my component:

import CKEditor from '@ckeditor/ckeditor5-react';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

and then in the render function:

<CKEditor
    editor={ClassicEditor}
    data="<p>Hello from CKEditor 5!</p>"
    onInit={(editor: any) => {
        // You can store the "editor" and use when it is needed.
        console.log('Editor is ready to use!', editor);
    }}
    onChange={(event: any, editor: any) => {
        const data = editor.getData();
        console.log({ event, editor, data });
    }}
    onBlur={(event: any, editor: any) => {
        console.log('Blur.', editor);
    }}
    onFocus={(event: any, editor: any) => {
        console.log('Focus.', editor);
    }}
/>

results in

ckeditor.js:5 Uncaught CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

    at Object.<anonymous> (...)
    at Object../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js (...)
    at n (...)
    at Module.<anonymous> (...)
    at n (...)
    at ./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js (...)
    at ...
    at ...
    at Object../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js (...)
    at __webpack_require__ (...)

Am I missing something obvious?

[FilipTokarski]

Hi, thanks for the report. In order to look into this issue, could you provide contents of your package.json file and detailed steps to reproduce this?

[c1trons]

No idea what's truly going on here, but on a basic sandbox it works, and as soon as I added a lot
node modules it broke in a different way.

https://codesandbox.io/s/cke5-react-test-3tnvu

the sandbox includes all the packages I currenly have in the package.json

[FilipTokarski]

Thanks for the code! That's really strange, because the setup you send works ok on my machine. I only had to add default to exports, so for example I have:
export default class CKEditorTest extends Component
instead of:
export class CKEditorTest extends Component

So the problem here is definitely not the Editor or its integration with React. Please make sure that you are integrating editor according to our docs. In case of future problems, I guess we would need even more detailed step by step path to reproduce this.

[ExploreHW]

I replaced

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

with

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

is working fine for me

[FilipTokarski]

@c1trons did you manage to make it work with the above ☝️ solution?

[c1trons]

I ended up going with a different solution as I didn't have enough time to
debug at the time.

On Fri, 29 May 2020 at 14:28, Filip Tokarski [e-mail]
wrote:

@c1trons https://github.com/c1trons did you manage to make it work with
the above ☝️ solution?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ckeditor/ckeditor5-react/issues/140#issuecomment-635922043,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AGIDSXJLZC2F4YFNXEUCNLDRT6L5VANCNFSM4K42IZ4A
.

[norens]

you ned create file "./types/ckeditor/index.d.ts" and write to

declare module '@ckeditor/ckeditor5-react';
declare module '@ckeditor/ckeditor5-build-classic';

it is work for me