Building from v43.2.0 source produces "ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor" error in app

[dstj]

I'm trying to build a CKEditor5 with a custom plugin, but every time a build from the v43.2.0 source, I have the following error in my Angular app. I tried building the v43.2.0 branch as is (i.e. git hash 46c386c02f1ad935d5d30cf65eaa782854ee64b3) and I still get the error:

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    at new ch (ckeditor.js:6:861020)
    at CKEditorComponent.attachToWatchdog (ckeditor-ckeditor5-angular.mjs:301:36)
    at CKEditorComponent.ngAfterViewInit (ckeditor-ckeditor5-angular.mjs:181:14)
    at callHookInternal (core.mjs:5136:14)
    at callHook (core.mjs:5163:13)
    at callHooks (core.mjs:5118:17)
    at executeInitAndCheckHooks (core.mjs:5068:9)
    at refreshView (core.mjs:12862:21)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)

When using the NPM packages "ckeditor5": "^43.2.0" and "@ckeditor/ckeditor5-angular": "^9.0.0" it works without error. This error only happens when building from source.

The sample at "C:\dev\github\ckeditor5\packages\ckeditor5-build-decoupled-document\sample\index.html" works though after build from the source, it only appears to throw from my Angular app, hence the though that this is a ckeditor5-angular issue... forgive me if I'm wrong ;)

.html

<ckeditor [class]="class" [editor]="ckeditor" [ngClass]="getValidationCss()" [(ngModel)]="text" [disabled]="isDisabled"
        (ready)="onReady($event)" (change)="onChange($event)"></ckeditor>

.ts

import * as DecoupledEditor from '../../../assets/js/ckeditor.js';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';

public ckeditor = DecoupledEditor;
...

Building from source

OS Name: Microsoft Windows 11 Pro OS Version: 10.0.22631 N/A Build 22631 Node: v18.20.4 Command: PS C:\dev\github\ckeditor5\packages\ckeditor5-build-decoupled-document> npm install && npm run build

Then copying the ckeditor.js file from C:\dev\github\ckeditor5\packages\ckeditor5-build-decoupled-document\build\ to my app folder.

Any ideas what is happening here?

[Witoso]

TBH, we really discourage now building from source, and we treat it as a legacy method. Our build pipeline is optimized for yarn 1.x.x for example, and we cannot promise npm will behave in the same way.

I'm trying to build a CKEditor5 with a custom plugin

Creating custom plugins with ckeditor5 package is possible and recommended, and doesn't require any additional build step outside your Angular app. You need to migrate from predefined build to a standard build, and then import things needed for a plugin from ckeditor5`. This is way simpler than using the source.

[dstj]

Thanks, I was upgrading from v37 or something, so I was used to building it from source (always with issues every time I needed to upgrade mind out).

I managed to successfully create a plugin package from scratch with ckeditor5-package-generator. It doesn't say much on how that package should be deployed, so I ended up copying the whole dist folder into my Angular app.

For now, I'm unstuck. :) Still finding it weird that building the source as is doesn't work, but hey, no longer a problem... until the next update anyway ;)