Troubleshooting CKEditor5 installation: Dealing with the error 'Property 'create' is undefined'

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?

Answer №1

Have you attempted using the following import statement?

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

Answer №2

Have you experimented with adjusting the esModuleInterop and allowSyntheticDefaultImports compiler settings?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Several buttons sharing the same class name, however, only the first one is functional

As a newcomer to JavaScript, I am currently working on the front-end of a basic ecommerce page for a personal project. My query pertains to the uniformity of all items being displayed on the page, except for their names. When I click on the "buy" button f ...

Triggering hovers inside one div by hovering over another div

Currently stuck on a project and unable to find a solution after trying various approaches. Here is the link to the task at hand... The objective is to make all inner divs animate simultaneously when the outer div is rolled over. Additionally, clicking on ...

Is there a way to alter the background color of a Material UI card when it is being hovered over

I'm currently using material ui with react and I have a question regarding the background color of my card component when a user hovers over it. Can someone help me figure out how to achieve this? For reference, here is the live code link in CodeSand ...

Press the 'enter' button to post your tweet with Greasemonkey

I am working on a Greasemonkey script that will automatically submit a tweet when the user presses the 'enter' key. The script works perfectly on a basic HTML page with some help from tips I found on this website. However, when I attempt to use t ...

A notification pop-up will only appear the first time after sending a repeated action

When testing my snackBar functionality by inputting incorrect user credentials multiple times and submitting the form, I encountered an issue. The snackBar only appears the first time, not every time an error or success message is dispatched. Below is the ...

Using VeeValidate with v-menu

Has anyone been able to successfully apply veevalidate to vuetify's v-menu component? I've tried using the validation-provider container with other HTML inputs and it works fine, but when I try to integrate it with v-menu, it doesn't seem t ...

Having trouble with the image compressor not being imported correctly in Next.js?

I've been attempting to compress an image, but when I try to import the ImageCompressor normally like this: import ImageCompressor from "image-compressor.js"; It throws an error: Uncaught ReferenceError: window is not defined This is the s ...

Optimizing the Angular app for production can lead to the malfunction of specific components

I am currently working on an Angular application and encountering some issues during the compilation process using ng build. When I compile the project for production deployment with the optimization option enabled, I am faced with console errors that prev ...

Algorithm for combining animation with a click event in JS/jQuery

I am currently working on a webpage that displays a simple div when the cursor is not hovering over it. When the cursor hovers over the div, it fades into a different div with unique content. The intention is for the simple div to remain non-clickable, wh ...

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

Using flags to translate text on Google should not result in being redirected to another website

I have integrated Google's language picker with country flags into my WordPress template using the code below: <!-- Add English to Chinese (Simplified) BETA --> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google. ...

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

Menu button is expanded without the need to click

The Bootstrap 5 button extends the default behavior and does not collapse. Here is the code: <nav id="header-nav" class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class= ...

Exploring the integration of external javascript AMD Modules within Angular2 CLI

During my experience with Angular2 pre-releases, I found myself using systemjs to incorporate external JavaScript libraries like the ESRI ArcGIS JavaScript API, which operates on AMD modules (although typings are available). Now that I am looking to trans ...

`The value of an element within an array changes automatically`

In my current setup, I have a traditional array where each element represents an HTML element. The issue arises when I manipulate these elements within the array; any changes made to the HTML element also reflect in the array automatically. However, I pref ...

What strategies can I implement to prevent security alerts in Internet Explorer 8 when accessing Google Maps via a secure connection

When using Google Maps on my project through an https connection, I encountered a problem. Interestingly, the issue only arises in certain browsers while others work fine. Despite searching for a solution extensively, I have not been able to find one. Some ...

Combine values within a single property of an object using the reduce method

My array consists of objects structured like this: let array = [{ "Age": 20, "Name": "Kevin" }, { "Age": 15, "Name": "Alfred" }, { "Age": 30, "Name": "Joe" }]; I am aiming to transform it into an object with combined values like t ...

Performing a task once elements are added to an array

I created a function that calls an API to retrieve information for each product and then stores it in an array. After looping through all the products, I want to perform an action with the array. Here is my code: newProducts: any = [] loadOfferRelated(o ...

Deactivate the AJAX button after the specified number of clicks

Imagine I have a model called Post, and it can be associated with up to n Comments (where the number is determined by the backend). Now, let's say I have a view that allows users to add a Comment through an AJAX request. What would be the most effecti ...

Converting MiniZinc CSP to JSON using a workaround for iterating through arrays in JavaScript

Utilizing the node.js module "Governify CSP Tools" to tackle a CSP issue has been challenging. Despite following the guidelines on defining an array from the CSP model schema (https://www.npmjs.com/package/governify-csp-tools), I have encountered syntax er ...