Issue #4187Opened March 9, 2022by Townsheriff0 reactions

BUG: Editor Destroy method throws an error in React

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 98

Reproducible demo link

https://codesandbox.io/s/withered-rain-z74rst?file=/src/App.js

Describe the bug

How to reproduce the bug?

  1. Unmount child element
  2. Create useEffect with callback where editor is destroyed

What is the expected behavior? No error

What is the current behavior? Throws error, because cannot find an element. At least a getBody() returns null.

Stack trace from fork 0.18.3 with disabled minifaction.

TypeError: Cannot read properties of null (reading 'querySelector')
    at child.getBody (grapes.min.js:53052:1)
    at grapes.min.js:11286:1
    at Array.forEach (<anonymous>)
    at child.toggleSelectComponent (grapes.min.js:11284:1)
    at child.stopSelectComponent (grapes.min.js:11244:1)
    at child.stop (grapes.min.js:11975:1)
    at EditorModel.stopDefault (grapes.min.js:46802:1)
    at EditorModel.destroyAll (grapes.min.js:46938:1)
    at Object.destroy (grapes.min.js:47790:1)
    at page-builder-tab.tsx:28:16

In case code sandbox disappears:

import grapesjs from "grapesjs";

import React from "react";

export default function App() {
  const [showFoo, setShowFoo] = React.useState(true);

  const toggle = () => {
    setShowFoo(!showFoo);
  };

  return (
    <div>
      <button onClick={toggle}>Click To Toggle!</button>
      {showFoo ? <Foo /> : <p>Click Button To Show Grapes</p>}
    </div>
  );
}

const Foo = () => {
  React.useEffect(() => {
    const editor = grapesjs.init({
      container: "#gjs",
      fromElement: 1,
      storageManager: { type: 0 },
      plugins: ["gjs-blocks-basic"]
    });

    return () => {
      editor.destroy();
    };
  });

  return <div id="gjs"></div>;
};

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (0)

No answers yet.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.