Установка CKEditor5 «Не удается прочитать свойство «создать» неопределенного»

#javascript #typescript #webpack #ecmascript-6 #ckeditor

#javascript #typescript #webpack #ecmascript-6 #ckeditor

Вопрос:

Я пытаюсь настроить CKEditor5 на моем сайте, используя @ckeditor/ckeditor5-build-classic пакет npm. У меня установлена версия 12.0.0, которая является последней на сегодняшний день.

Я использую следующий метод настройки — https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-1-integrating-existing-builds кажется, что это должно быть очень просто.

Я использую TypeScript и имею следующий код в модуле:

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

ClassicEditor
    .create(document.querySelector('.html-editor'))
    .then(editor => {
        console.log(editor);
    })
    .catch(error => {
        console.error(error);
    });
  

…который переносится в следующий 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);
});
  

К сожалению, я получаю следующую ошибку при загрузке страницы:

 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
  

Он знает, что это ckeditor5_build_classic_1 класс, но ckeditor5_build_classic_1["default"] не определен.

Редактировать:

Любопытно, что если я поставлю точку останова в строке, в которой происходит сбой, и запущу следующее в консоли, это сработает…

 ckeditor5_build_classic_1.create(document.querySelector('.html-editor'))
  

Тогда проблема в переносе?

Ответ №1:

Вы пробовали использовать это import вместо этого?

 import * as InlineEditor from '@ckeditor/ckeditor5-build-inline';
  

Ответ №2:

Вы пытались установить / отменить esModuleInterop и allowSyntheticDefaultImports параметры компилятора?