Encountering an error of "Cannot access property 'PluginKey' of undefined" while utilizing @toast-ui/editor in a JavaScript project

Struggling with integrating the @toast-ui/editor into my native JavaScript project. The editor is not displaying due to this error message:

Cannot read property 'PluginKey' of undefined"

This error is specifically within the toastui-editor module. Here's a snippet of my code:

<div id="editor"></div>

<script src="node_modules/@toast-ui/editor/dist/toastui-editor.js"></script>
<script src="node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js"></script>

<script>
    const { Editor } = toastui; 
    var editor = new Editor({
        el: document.querySelector("#editor"),
        initialEditType: "markdown",
        previewStyle: "vertical",
        toolbarItems: [['heading', 'bold', 'italic', 'ol', 'ul']],
    });
</script>

Despite including all necessary JavaScript files and following the documentation, the issue persists.

Prefer not to rely on CDN links for this library.

javascriptnpmtext-editortoast-ui-editor

Answer №1

There was a discussion about this issue in the official tui.editor repository, where someone shared a solution without using a CDN for the library. Below are the key details from the conversation for quick reference.

The toast_generator.js file:

import * as Editor from "@toast-ui/editor";

export default Editor;

The webpack.config.js file:

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./build_toastui/toast_generator.js",
  output: {
    path: path.join(__dirname, "public", "js"),
    filename: "toastui.js",
    library: {
      name: "toastui",
      type: "var",
      export: "default"
    },
  },
};

The index.html page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/css/toastui-editor.min.css" />

    <title>Editor</title>
  </head>
  <body>
    <div>
      <div id="editor"></div>
    </div>

    <script src="/js/toastui.js"></script>
    <script>
      var editor = new toastui.Editor({
        el: document.querySelector("#editor"),
        initialEditType: "markdown",
        previewStyle: "vertical",
      });

      editor.getMarkdown();
    </script>
  </body>
</html>

After following these steps:

$ npx webpack build
$ npm run start

The project structure resembled the following:

- project root/
    ├ build_toastui/
    │    └ toast_generator.js # temporary script for generating toastui.js
    │
    ├ public/
    │    ├ css/
    │    │    └ toastui-editor.css # css from dist directory
    │    │
    │    ├ js/
    │    │    └ toastui.js # it will be created from webpack
    │    │
    │    └ index.html
    │
    ├ app.js
    ├ package.json
    ├ webpack.config.js
    │

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

Tips for identifying text within HTML code

Looking for help with this HTML code: <span class="navbar-text navbar-nav company-title">aLine</span> The text "aLine" is displayed on the navigation bar. Can you guide me on how to locate this text using xpath? ...

javascripthtmlseleniumselenium-webdriverwebdriver

Using JavaScript build-in functions in a Vue template allows for enhanced functionality and

Is there a way to utilize JavaScript built-in functions within a Vue template? {{ eval(item.value.substring(2)) }} I attempted to use the JS function eval() in {{}}, but encountered several errors such as: [Vue warn]: Property or method "eval" i ...

javascriptvue.jstemplates

Weapons of Mass Destruction - receive markdown content

My application is utilizing a markdown editor from Google Code. $(document).ready(function () { var converter = Markdown.getSanitizingConverter(); var editor = new Markdown.Editor(converter); editor.run(); }); <div class="wmd-panel"> ...

javascriptjquerymarkdownwmdwmd-editor

How do you trigger the playback of a specific audio file when a user clicks on it?

I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...

javascripthtmlcss

Issue with Ionic toggles not updating the correct local storage entry

Encountering an issue with ionic toggles where changing any toggle affects only the last if statement below in local storage. Here is the list of toggles... $scope.settingsList = [ { text: "GBP", checked: gbpON }, { text: "USD", checked: usdON } ...

javascriptangularjsionic-frameworklocal-storage

The latest version of npm, 3.5.4, encountered an EBUNDLEOVERRIDE issue during a recent update,

Recently updated to Node 5.4.0 using 'brew upgrade' and then proceeded with 'npm update -g,' resulting in an upgrade to npm 3.5.4. However, the npm update process completed with some warnings: /usr/local/lib └── <a href="/cdn- ...

node.jsnpm

How can I prevent a browser from allowing users to select an image tag?

I'm dealing with an issue on my webpage where I have an image that is inadvertently picking up mouse clicks, causing the browser to perform drag and drop actions or highlight the image when clicked. I really need to use the mousedown event for somethi ...

javascripthtmldom

Is it possible for an object to receive notifications when a component object undergoes changes in Angular 2/4?

When working with Angular components, it's possible to pass a variable or object as @Input(). The component will be notified whenever the value of this input changes, which is pretty cool... I'm currently developing an application that features ...

javascriptangulardata-bindingangular2-databinding

Using Jquery to toggle the visibility of div elements with the same structure, but ensuring only one is

Many people have posed this question. I am attempting to create a functionality where a div can expand and collapse using a +/- button. I have 5 divs with class=="expanderContent". When the function below is triggered by a click, all 5 items expand or coll ...

javascriptjqueryhtmlcss

Update the PHP webpage dynamically by utilizing AJAX and displaying the PHP variable

I am working on a PHP page that includes multiple queries, and I would like to be able to include this page in my index.php file and display the results with an automatic refresh similar to the Stack Overflow inbox feature. Is there a way to achieve this ...

javascriptphpajax

Having difficulty understanding the sequence of the JavaScript AJAX demonstration

Understanding the concept of AJAX seems relatively easy, however, I am struggling to grasp the logic. While exploring how AJAX works, I came across the following example on w3schools.com, which is quite similar to examples on other sites as well. <!DOC ...

javascriptajax

The window.focus() function does not seem to be functioning as expected when using

I have been trying to use this code snippet to bring the window into focus. It seems to be working smoothly on Internet Explorer, but unfortunately it is not behaving as expected in Firefox. Any tips or recommendations would be greatly welcomed. ((Javas ...

javascriptfirefoxwebdriverdriver

Send the form via ajax

I am in the process of creating a unique application for my university, which is essentially a social network. One key feature I need to implement is the ability for users to add comments, which involves inserting a row into a specific database. To achieve ...

javascriptjqueryhtmlajaxforms

Creating a JavaScript class definition without the need for instantiation

I am looking to create an empty data class in JavaScript that can later be filled with JSON data. In C#, I would typically do something like this: class Person { string name; int age; Person[] children; var whatever; } However, when I try ...

javascriptjson

Alert: Potential Npm Sass Issue

While trying to install sass using the command prompt, I entered npm install -g sass and encountered this warning: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7c697f6c7f746e695a28342b3429">[email&# ...

npmsasscommand

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

Setting up Swiper in a ReactJS environment

I've been trying to incorporate Swiper for a slider in my React application, but it's not behaving as expected. Here's what I did: npm install Swiper Then I imported Swiper in the componentDidMount method of my component like this: import ...

javascriptreactjsswiper.js

Is there a way for the window.onbeforeunload event to wait for an ongoing animation to finish

Exploring the JavaScript code below which utilizes an animation library (such as scriptaculous). window.onbeforeunload = function(event) { document.body.fade(); } When leaving the page, the animation does not finish before the page changes. This raise ...

javascriptmultithreadinganimationdom-eventsscriptaculous

Using JQuery, retain only the initial N elements in a list and discard the rest

I'm looking to streamline a list of items in the DOM by keeping only the first N items, ideally through the use of slice and remove methods. Could someone provide me with the JQuery syntax for removing items that come after the first N in the list? ...

javascriptjqueryhtmldomdom-manipulation

Revise the list on the page containing MEANJS components

Utilizing MEAN JS, I am attempting to make edits to the list items on the page, but an error keeps appearing. I have initialized the data using ng-init="find()" for the list and ng-init="findOne()" for individual data. Error: [$resource:badcfg] Error in r ...

javascriptangularjsmeanjs