Cannot find module 'ckeditor5/src/core' or its corresponding type declarations.

[rbalet]

Description

After updated to th3 v6.0.0, I got the following errors

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/contextwatchdog.d.ts:8:67 - error TS2307: Cannot find module 'ckeditor5/src/core' or its corresponding type declarations.

8 import type { Context, Editor, EditorConfig, ContextConfig } from 'ckeditor5/src/core';
                                                                    ~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/contextwatchdog.d.ts:9:49 - error TS2307: Cannot find module 'ckeditor5/src/utils' or its corresponding type declarations.

9 import type { ArrayOrItem, CKEditorError } from 'ckeditor5/src/utils';
                                                  ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog.d.ts:8:36 - error TS2307: Cannot find module 'ckeditor5/src/utils' or its corresponding type declarations.

8 import type { CKEditorError } from 'ckeditor5/src/utils';
                                     ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog.d.ts:9:52 - error TS2307: Cannot find module 'ckeditor5/src/core' or its corresponding type declarations.

9 import type { Editor, EditorConfig, Context } from 'ckeditor5/src/core';
                                                     ~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/watchdog.d.ts:8:36 - error TS2307: Cannot find module 'ckeditor5/src/utils' or its corresponding type declarations.

8 import type { CKEditorError } from 'ckeditor5/src/utils';

[Reinmar]

Did you update CKEditor 5 to v37.0.1 too?

It introduced official typings and the Watchdog was exposed on ckeditor5/src/watchdog. v6.0.0 of Angular integration will only work with CKE5 v37.0.0+.

See: https://github.com/ckeditor/ckeditor5/releases and https://github.com/ckeditor/ckeditor5-angular/releases/tag/v6.0.0

[rbalet]

@Reinmar Yes I do.

I had to add ckeditor5 as devDependencies for it to be working.

The reason of my pull request :)

[pomek]

Hi @rbalet, could you share steps to reproduce the issue? I'd like to understand the problem.

[rbalet]

Hi @pomek & @Reinmar. Here the project I used that is not working https://github.com/rbalet/ckeditor5-megaphone-website

You have to download it through npm for it to show the error

[mca-binita]

Hello, Recently I have upgraded my Angular application and CKEditor 5 also. I am facing exact issue described by @rbalet.

Can you please guide me the exact steps to fix this problem?

Regards, Binita

[rbalet]

@mca-binita just run npm i ckeditor5 --save-dev and it should work again ;)

[dstj]

just run npm i ckeditor5 --save-dev and it should work again ;)

I use a custom build of ckeditor5. After upgrading my build and ckeditor5-angular, I had the same error. This workaround / hack / solution does work to fix the compilation errors, but it's really ugly since I really don't need the ckeditor5 npm package, even if it's just a dev dependency. :/

[mca-binita]

I did not use the workaround but i downgraded ckeditor angular component to the previous version and things are sorted. Latest version angular component has issue.

On Wed, 3 May, 2023, 11:39 pm D. St-Jacques, @.***> wrote:

just run npm i ckeditor5 --save-dev and it should work again ;)

I use a custom build of ckeditor5. After upgrading ckeditor5-angular, I had the same error. This workaround / hack / solution does work to fix the compilation errors, but it's really ugly since I really don't need the ckeditor5 npm package, even if it's just a dev dependency. :/

— Reply to this email directly, view it on GitHub https://github.com/ckeditor/ckeditor5-angular/issues/364#issuecomment-1533491161, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOXL4PPG5Y75EFZODCMIZ5LXEKNNXANCNFSM6AAAAAAWWUZBBU . You are receiving this because you were mentioned.Message ID: @.***>

[Witoso]

@pomek have you had a chance to look at this?

[pomek]

I'm sorry for not getting back to you sooner. I think the issue should be resolved in the latest release (https://github.com/ckeditor/ckeditor5-angular/releases/tag/v7.0.0). Could you guys confirm?

[rbalet]

@pomek I tried it but it didn't fix the issue. Sorry

[pomek]

This issue is not related to the integration itself.

Types from the ckeditor5-watchdog package imports things from ckeditor5. This leads to the conclusion that Watchdog should load ckeditor5 as a peer dependency.

node_modules/@ckeditor/ckeditor5-watchdog/src/contextwatchdog.d.ts:8:67
                       ^^^^^^^^^^^^^^^^^^

8 import type { Context, Editor, EditorConfig, ContextConfig } from 'ckeditor5/src/core';
                                                                     ^^^^^^^^^

Of course, it occurs when a developer wants to build an app.

[jeisonjei]

@mca-binita I uninstalled ckeditor5-angular which was version 7.0.1

npm uninstall @ckeditor/ckeditor5-angular

and installed version 6.0.1

npm install --save @ckeditor/ckeditor5-angular@6.0.1

This helped me

[FilipTokarski]

Steps to reproduce:

1. Create an editor build using Online Builder, you will use it in step 4.
2. Create a new Angular app.
3. Go to Angular integration guide, install CKEditor component and add the required import in app.module.ts, install all required dependencies.
4. Follow the "Using a custom CKEditor 5 build" section by using ONLY the build file from step 1 (you can find it in ckeditor5-40.0.0-xxxxx/build/ckeditor.js).
5. Execute npm run start.

Or use editor_build.zip example application (download and execute npm i && npm run start).

Result:

Error: node_modules/@ckeditor/ckeditor5-core/src/editor/editor.d.ts:10:31 - error TS2307: Cannot find module '@ckeditor/ckeditor5-ui' or its corresponding type declarations.

10 import type { EditorUI } from '@ckeditor/ckeditor5-ui';
                                 ~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/contextwatchdog.d.ts:8:67 - error TS2307: Cannot find module 'ckeditor5/src/core' or its corresponding type declarations.

8 import type { Context, Editor, EditorConfig, ContextConfig } from 'ckeditor5/src/core';
                                                                    ~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/contextwatchdog.d.ts:9:49 - error TS2307: Cannot find module 'ckeditor5/src/utils' or its corresponding type declarations.

9 import type { ArrayOrItem, CKEditorError } from 'ckeditor5/src/utils';
                                                  ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog.d.ts:8:36 - error TS2307: Cannot find module 'ckeditor5/src/utils' or its corresponding type declarations.

8 import type { CKEditorError } from 'ckeditor5/src/utils';
                                     ~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog.d.ts:9:52 - error TS2307: Cannot find module 'ckeditor5/src/core' or its corresponding type declarations.

9 import type { Editor, EditorConfig, Context } from 'ckeditor5/src/core';
                                                     ~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ckeditor/ckeditor5-watchdog/src/watchdog.d.ts:8:36 - error TS2307: Cannot find module 'ckeditor5/src/utils' or its corresponding type declarations.

8 import type { CKEditorError } from 'ckeditor5/src/utils';
                                     ~~~~~~~~~~~~~~~~~~~~~

Error: src/app/app.component.html:3:12 - error TS2322: Type '{ ClassicEditor: {}; }' is not assignable to type '{ create(sourceElementOrData: string | HTMLElement, config?: EditorConfig | undefined): Promise<Editor>; }'.

3 <ckeditor [editor]="Editor"></ckeditor>
             ~~~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

[richard-ncs]

As suggested, I tried adding ckeditor to dev dependencies and even tried downgrading @ckeditor/ckeditor5-angular@6.0.1.

None of this has worked for me at all and the error persists.

Stackblitz: https://stackblitz.com/edit/stackblitz-starters-ymdlvz?file=package.json

[EddyVerbruggen]

@richard-ncs I know it's not ideal, but to make your stackblitz project work is by editing app.component.ts:

• change the import to import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
• and add any here: public Editor: any = ClassicEditor;

[richard-ncs]

@richard-ncs I know it's not ideal, but to make your stackblitz project work is by editing app.component.ts:

• change the import to import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
• and add any here: public Editor: any = ClassicEditor;

This worked for me.

[uaKorona]

When you use a custom build of CKEditor, you receive a bundled ckeditor.js and ckeditor.d.ts for types. The ckeditor.d.ts file, in turn, relies on importing @ckeditor libraries (or plugins) that are already bundled in ckeditor.js but not provided as dependencies in the main package.json of the project. This is why we encounter a problem.

In my project, I removed ckeditor.d.ts (goodbye typings :( ... ), but after that, the build completed successfully.

[Witoso]

@uaKorona I think you could also install CKEditor packages as devDependencies, and the types would work.

[lidiaCirrone]

Not sure if it's the corresponding fix for React, but adding any in the editor prop fixed it for me:

import { CKEditor } from '@ckeditor/ckeditor5-react';

const RichTextEditor = () => {
  return (
   <CKEditor
    editor={Editor as any}
    ...
   />
  )
}

[josecabral-afs]

@richard-ncs I know it's not ideal, but to make your stackblitz project work is by editing app.component.ts:

• change the import to import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
• and add any here: public Editor: any = ClassicEditor;

You can also do public Editor : typeof ClassicEditor = ClassicEditor; which will be the same as public Editor = ClassicEditor;