I am in the process of implementing CKEditor5 on my website using the npm package
@ckeditor/ckeditor5-build-classic
. I have installed version 12.0.0, which is the most recent update available.
Following the setup method outlined at this link, it seems like a straightforward process.
Utilizing TypeScript, within a module, I have included the following code:
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
ClassicEditor
.create(document.querySelector('.html-editor'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
This TypeScript code transpiles into the following JavaScript:
var ckeditor5_build_classic_1 = require("@ckeditor/ckeditor5-build-classic");
ckeditor5_build_classic_1["default"]
.create(document.querySelector('.html-editor'))
.then(function (editor) {
console.log(editor);
})["catch"](function (error) {
console.error(error);
});
Upon loading the page, an error occurs with the message:
addadventure.ts:11 Uncaught TypeError: Cannot read property 'create' of undefined
at Object.<anonymous> (addadventure.ts:11)
at Object../wwwroot/js/pages/adventures/addadventure.ts (addadventure.ts:266)
at __webpack_require__ (bootstrap:781)
at fn (bootstrap:149)
at Object.1 (addadventure.ts:266)
at __webpack_require__ (bootstrap:781)
at checkDeferredModules (bootstrap:45)
at bootstrap:857
at bootstrap:857
The issue appears to be related to
ckeditor5_build_classic_1["default"]
being undefined despite recognizing it as a class.
EDIT:
Interestingly, by setting a breakpoint on the problematic line and executing
ckeditor5_build_classic_1.create(document.querySelector('.html-editor'))
in the console, it works as expected.
Could the problem potentially lie within the transpilation process?