Open rbalet opened 1 year ago
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
@Reinmar Yes I do.
I had to add ckeditor5
as devDependencies for it to be working.
The reason of my pull request :)
Hi @rbalet, could you share steps to reproduce the issue? I'd like to understand the problem.
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
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
@mca-binita just run npm i ckeditor5 --save-dev
and it should work again ;)
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. :/
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: @.***>
@pomek have you had a chance to look at this?
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?
@pomek I tried it but it didn't fix the issue. Sorry
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.
@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
app.module.ts
, install all required dependencies.ckeditor5-40.0.0-xxxxx/build/ckeditor.js
).npm run start
.Or use editor_build.zip example application (download and execute npm i && npm run start
).
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.
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
@richard-ncs I know it's not ideal, but to make your stackblitz project work is by editing app.component.ts
:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
any
here: public Editor: any = ClassicEditor;
@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.
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.
@uaKorona I think you could also install CKEditor packages as devDependencies
, and the types would work.
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}
...
/>
)
}
@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;
Description
After updated to th3 v6.0.0, I got the following errors