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?
- Unmount child element
- 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.
Issue #3986
BUG: Cannot read properties of undefined (reading 'uploadFile')
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96.0.4664.45 Reproducible demo lin...
Issue #3806
BUG: Target :null when adding video
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome new version Reproducible demo link...
Issue #3759
BUG: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome new versionReproducible demo link htt...
Issue #3939
BUG: Disabled drag and drop in preview
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.