hook.js:608 Error tracking OPENED_MTCT_EDITOR TypeError: Cannot read properties of undefined (reading 'track')

Question

I want to use wiris mattype in ckeditor. In this case, mathtype symbols are visible in the ckeditor toolbar. But when I try to enter the formula in the editor using the modal, the formula I entered does not enter the editor and gives an error message as shown in the picture I have the following code:

import { CKEditor } from '@ckeditor/ckeditor5-react';
import {
    ClassicEditor,
    AccessibilityHelp,
    Autoformat,
    AutoImage,
    Autosave,
    Base64UploadAdapter,
    BlockQuote,
    Bold,
    Code,
    Essentials,
    FindAndReplace,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Heading,
    Highlight,
    ImageBlock,
    ImageCaption,
    ImageInline,
    ImageInsert,
    ImageInsertViaUrl,
    ImageResize,
    ImageStyle,
    ImageTextAlternative,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Italic,
    Link,
    LinkImage,
    List,
    ListProperties,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    RemoveFormat,
    SelectAll,
    SourceEditing,
    SpecialCharacters,
    SpecialCharactersArrows,
    SpecialCharactersCurrency,
    SpecialCharactersEssentials,
    SpecialCharactersLatin,
    SpecialCharactersMathematical,
    SpecialCharactersText,
    Strikethrough,
    Subscript,
    Superscript,
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar,
    TextTransformation,
    TodoList,
    Underline,
    Undo
} from 'ckeditor5';
import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';



import { baseURL } from '../api';

import './styles.scss';

import 'ckeditor5/ckeditor5.css';

function CKEDITOR(props) {

    return (
        <CKEditor
            editor={ClassicEditor}
            config={{
                toolbar: {
                    items: [
                        'undo',
                        'redo',
                        '|',
                        'sourceEditing',
                        'findAndReplace',
                        '|',
                        'subscript',
                        'superscript',
                        'heading',
                        '|',
                        'fontSize',
                        'fontFamily',
                        'fontColor',
                        'fontBackgroundColor',
                        '|',
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        'code',
                        'removeFormat',
                        '|',
                        'specialCharacters',
                        'link',
                        'insertImage',
                        'mediaEmbed',
                        'insertTable',
                        'highlight',
                        'blockQuote',
                        '|',
                        'bulletedList',
                        'numberedList',
                        'todoList',
                        'outdent',
                        'indent',
                        'MathType', 'ChemType',
                    ],
                },
                plugins: [
                    AccessibilityHelp,
                    Autoformat,
                    AutoImage,
                    Autosave,
                    Base64UploadAdapter,
                    BlockQuote,
                    Bold,
                    Code,
                    Essentials,
                    FindAndReplace,
                    FontBackgroundColor,
                    FontColor,
                    FontFamily,
                    FontSize,
                    Heading,
                    Highlight,
                    ImageBlock,
                    ImageCaption,
                    ImageInline,
                    ImageInsert,
                    ImageInsertViaUrl,
                    ImageResize,
                    ImageStyle,
                    ImageTextAlternative,
                    ImageToolbar,
                    ImageUpload,
                    Indent,
                    IndentBlock,
                    Italic,
                    Link,
                    LinkImage,
                    List,
                    ListProperties,
                    MediaEmbed,
                    Paragraph,
                    PasteFromOffice,
                    RemoveFormat,
                    SelectAll,
                    SourceEditing,
                    SpecialCharacters,
                    SpecialCharactersArrows,
                    SpecialCharactersCurrency,
                    SpecialCharactersEssentials,
                    SpecialCharactersLatin,
                    SpecialCharactersMathematical,
                    SpecialCharactersText,
                    Strikethrough,
                    Subscript,
                    Superscript,
                    Table,
                    TableCaption,
                    TableCellProperties,
                    TableColumnResize,
                    TableProperties,
                    TableToolbar,
                    TextTransformation,
                    TodoList,
                    Underline,
                    Undo,
                    MathType,
                ],
                initialData: props.value,
                image: {
                    toolbar: [
                        'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|',
                        'toggleImageCaption', 'imageTextAlternative'
                    ]
                }
            }}
            onChange={(event, editor) => { props.onChange(editor.getData()); }}
        />
    );
}

export default CKEDITOR;

This is causing the following error: enter image description here

package.json is as follows:

{
  "name": "@coreui/coreui-free-react-admin-template",
  "version": "5.1.0",
  "description": "CoreUI Free React Admin Template",
  "homepage": ".",
  "bugs": {
    "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
  },
  "license": "MIT",
  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
  "scripts": {
    "build": "vite build",
    "lint": "eslint \"src/**/*.js\"",
    "serve": "vite preview",
    "start": "vite"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-react": "^9.3.1",
    "@coreui/chartjs": "^4.0.0",
    "@coreui/coreui": "^5.0.2",
    "@coreui/icons": "^3.0.1",
    "@coreui/icons-react": "^2.2.1",
    "@coreui/react": "^5.1.0",
    "@coreui/react-chartjs": "^3.0.0",
    "@coreui/utils": "^2.0.2",
    "@popperjs/core": "^2.11.8",
    "@tinymce/tinymce-react": "^5.1.1",
    "@wiris/mathtype-ckeditor5": "^8.10.0",
    "chart.js": "^4.4.3",
    "chroma-js": "^3.1.1",
    "ckeditor5": "^43.2.0",
    "classnames": "^2.5.1",
    "core-js": "^3.37.1",
    "jquery": "^3.7.1",
    "katex": "^0.16.11",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-quill": "^2.0.0",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.23.1",
    "react-select": "^5.8.1",
    "react-toastify": "^10.0.5",
    "redux": "5.0.1",
    "simplebar-react": "^3.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.2",
    "eslint-plugin-react-hooks": "^4.6.2",
    "postcss": "^8.4.38",
    "prettier": "3.3.2",
    "sass": "^1.79.3",
    "vite": "^5.2.13"
  }
}

How can I fix this error?

I've tried pulling versions of ckeditor and mathtype that match each other. But still the same error occurred

Answer 1

The error is from a version issue between @ckeditor/ckeditor5-react, ckeditor5, and @wiris/mathtype-ckeditor5.

1. Check Versions
   If not, downgrade ckeditor5 to a compatible version, e.g., 42.0.0.

   npm install ckeditor5@42 @ckeditor/ckeditor5-react@9
   

2. Verify Plugin Configuration
   Make sure MathType and ChemType are correctly added to plugins and toolbar.items in your editor config.

3. Debug Errors
   Check the browser console might stem from init problems.

4. Wiris Service Availability
   If using a self-hosted setup, ensure the Wiris endpoint is correctly configured.

if none of these work i would reccomend trying a new package here are a couple

• KaTeX
• MathJax
• React-Mathquill