Ckeditor5-react: TypeError: Cannot read property 'destroy' of null

[Sharvin26]

Error:

I am getting the following error when using ckeditor5-react:

vendors~main.chunk.js:91647 Uncaught (in promise) TypeError: Cannot read property 'destroy' of null
    at Pr._destructor (vendors~main.chunk.js:91647)
    at vendors~main.chunk.js:91688

Steps to reproduce:

npx create-react-app my-app

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
            </div>
        );
    }
}

export default App;

When I open http://localhost:3000 I do not see the above error but when I navigate to a page and navigate back then I see the following error in console.

Versions:

• React: 17.0.2
• React DOM: 17.0.2
• @ckeditor/ckeditor5-build-classic: 27.1.0
• ckeditor/ckeditor5-react: 3.0.2

I found this issue which is quite similar to what I am facing.

At the end it stats that issue has been resolved but I am still facing the same issue.

[pomek]

In the past, I was able to reproduce the issue as well. I guess some race condition occurs and this line in the watchdog feature fails https://github.com/ckeditor/ckeditor5/blob/f74de8bf3658506af756c311a3bdf0636799b1e1/packages/ckeditor5-watchdog/src/editorwatchdog.js#L82.

cc: @ma2ciek

[ma2ciek]

Hi, @Sharvin26!

Thanks for reporting this bug and for the described steps.

I'll try to reproduce it and I'll check if it is easily fixable.

[ma2ciek]

Unfortunately I could not reproduce it :/

Perhaps there are some additional steps needed to reproduce it.

[ma2ciek]

I've been also trying with the browser navigation.

[Sharvin26]

Hello @ma2ciek, did you check the console? I am using Chrome Version 90.0.4430.212 (Official Build) (x86_64).

[ma2ciek]

Yes, not a single error in the console :/

[ma2ciek]

@ckeditor/qa-team, could you test it as well?

[LukaszGudel]

I could not reproduce this issue as well.

@Sharvin26 Could you provide an example CRA project zip/github repo, where you are able to recreate this issue?

[Sharvin26]

I tried by creating a sandbox and it's working properly but facing the issue in my codebase. I cannot share the codebase though may be due to another package it's occurring ( not sure though )

[Mgsy]

We've received another report about this error and I think I've found a scenario of how to reproduce it in one of our implementations.

Let's use our collaboration sample track-changes-for-react as an example.

Steps to reproduce

1. Visit http://localhost:8080/samples/track-changes-for-react.html.
2. Open the load-save integration.
3. Refresh the page and immediately click the "Navigate back" arrow in the browser.

Error

index.js:6 Uncaught (in promise) TypeError: Cannot read property 'destroy' of null
    at Mt._destructor (index.js:6)
    at index.js:6
Mt._destructor @ index.js:6
(anonymous) @ index.js:6

index.js:11 Uncaught TypeError: Cannot read property 'execute' of null
    at Object.onReady (index.js:11)
    at index.js:6

[victorwuky]

We're getting a similar scenario. We load a page with a ckeditor5-react instance that uses collaborative editing (i.e. connects to ckeditor cloud). Before everything loads, we quickly click back in the browser. And then we an error like this:

[iamsajithsasi]

I also have this issue in CRUD actions.

steps to produce:
Loop array of objects and create editor

while deleting an index from array, the associated editor is causing the issue. I have tried to destroy using useeffect in unmount phase, but

import React, { useState, useEffect } from "react";

import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default function Index(props) {
  const { text, data, index } = props;
  // console.log("editor props ", props);
  const [editor, setEditor] = useState();

  useEffect(() => {
    console.log("mounted", editor);
    return () => {
      console.log("unmount init", editor);
      if (editor && editor.destroy) {
        console.log("unmounted", editor);
        editor.destroy();
      }
    };
  }, [editor, setEditor]);

  return (
    <>
      <CKEditor
        editor={ClassicEditor}
        data={text ? text : ""}
        onReady={(editor) => {
          console.log("Editor is ready to use!", editor);
          setEditor(editor);
        }}
        onError={(err) => {
          console.log(err);
        }}
        onChange={(event, editor) => {
          const typedData = editor.getData();
          // console.log({ typedData });
          data(typedData, index);
        }}
        disabled={props.readOnly ? true : false}
        config={{
          toolbar: [
            "heading",
            "|",
            "bold",
            "italic",
            "link",
            "bulletedList",
            "numberedList",
            "blockQuote",
            "indent",
            "outdent",
            "|",
            "undo",
            "redo",
          ],
        }}
      />
    </>
  );
}

[lukasluecke]

I was also consistently running into this issue, adding a check before the destroy() call solves it.

https://github.com/ckeditor/ckeditor5/blob/78e2c4f47051e4f03af230de3f2c8d25643300fa/packages/ckeditor5-watchdog/src/editorwatchdog.js#L82

[ma2ciek]

I was also consistently running into this issue, adding a check before the destroy() call solves it.

https://github.com/ckeditor/ckeditor5/blob/78e2c4f47051e4f03af230de3f2c8d25643300fa/packages/ckeditor5-watchdog/src/editorwatchdog.js#L82

Unfortunately, it may be a risky / leaky fix as the newly created editor will not be destroyed. I guess that a proper fix will need a small rewrite in the watchdog so the Editor.create() and editor.destroy() promises will be stacked.

[haveaguess]

I was also consistently running into this issue, adding a check before the destroy() call solves it.
https://github.com/ckeditor/ckeditor5/blob/78e2c4f47051e4f03af230de3f2c8d25643300fa/packages/ckeditor5-watchdog/src/editorwatchdog.js#L82

Unfortunately, it may be a risky / leaky fix as the newly created editor will not be destroyed. I guess that a proper fix will need a small rewrite in the watchdog so the Editor.create() and editor.destroy() promises will be stacked.

Is there a way to monkey-patch it / suppress the unhandled exception until an official fix comes out ?

[haveaguess]

Connected thought would it be possible to use React ErrorBoundary to deal with / suppress this error? Reading this I guess not since it's in the promise chain