The error while TOAST UI Editor ColorSyntax applying

An unhandled runtime error occurred

TypeError: Cannot read properties of undefined (reading 'listen')

 

This issue with dependency tree of installed TOAST UI Editor.

 

Before that, see the React code

// TOAST UI Editor
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";

import "tui-color-picker/dist/tui-color-picker.css";
import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";
import colorSyntax from "@toast-ui/editor-plugin-color-syntax";

export default function Write() {
  ...
  return (
    ...
      <Editor
        previewStyle="vertical"
        height="600px"
        initialEditType="wysiwyg"
        usageStatistics={false}
        ref={editorRef}
        plugins={[colorSyntax]}
      />
  )
}

Module import and Apply plugins={[colorSyntax]} in Editor

 

and then solving the error.

 

First, Clean all installed modules and cache

rm -rf node_modules yarn.lock package-lock.json .next

 

Next, Install again

npm install

 

But I got a new error.

# Uninstall react & Modules related to toast-ui
npm uninstall react
npm uninstall @toast-ui/editor @toast-ui/react-editor @toast-ui/editor-plugin-color-syntax @toast-ui/editor-plugin-table-merged-cell

# If Error: Cannot find module 'babel-plugin-styled-components'
npm install babel-plugin-styled-components

# Install react & Modules related to toast-ui
npm install react
npm install @toast-ui/editor @toast-ui/react-editor @toast-ui/editor-plugin-color-syntax

 

Now, If run you can see

 

Source

https://github.com/nhn/tui.editor/issues/2101