BUG: Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome 104.0.5112.79
Reproducible demo link
https://jsfiddle.net/gvrnw2c3/4/
Describe the bug
How to reproduce the bug?
I'm currently unable to reproduce the bug using jsfiddle, which leads me to believe it's a problem with Chrome, but I'll continue trying to reproduce this.
Within my project as shown in the video:
- Click on a 'conditional-text' component (custom component type I've added)
- Click on 'Open Conditionals' button then within the dialog that appears on the screen, click 'Apply'
- Hover the cursor over the 'conditional-text' component
In JSFiddle (currently doesn't crash but I will continue to test):
- Click on the 'Hello World' text component
- Click on the 'Convert to Conditional' button at the bottom of the page
- Click on the newly created 'conditional-text' component (with the text "Open conditionals to choose text")
- Click on the 'Change Conditional' button at the bottom of the page
- Move the cursor over the 'conditional-text' component (currently doesn't crash but I will continue to test)
What is the expected behavior?
The app should continue running as normal (works fine in GrapesJS v18.4)
What is the current behavior?
The whole screen crashes as soon as the cursor is over the 'conditional-text' component and after around 5 seconds the following appears:
<img width="455" alt="Screenshot 2022-08-03 at 18 15 14" src="https://user-images.githubusercontent.com/67364267/182594957-2cc8e70b-42c4-452e-b29e-b02d77e9821c.png">Here is the screen capture of the issue:
After some (unsuccessful) debugging, I also found the following:
The commented out lines in the following methods (which are triggered upon clicking the 'Apply' button as seen in the video) seemed to be responsible for the crash. It's worth mentioning that all of these lines, when not commented out, affect the appearance of the component in the canvas (i.e. they change the visible text), so perhaps it's something to do with the view of the component being rendered. The other lines below do not result in the crash :
applyIfCondition(conditionCode, conditionObjects) {
const selectedComponent = this.editor.getSelected()
if (selectedComponent.isInstanceOf("conditional-text")) {
console.log(conditionCode, ...conditionObjects)
selectedComponent.addAttributes({ liquidtag: "if" })
// selectedComponent.components(conditionCode)
selectedComponent.set("conditionObjects", conditionObjects)
selectedComponent.set("isNew", false)
// selectedComponent.getView().render()
}
},
selectIfCondition(displayText, selectedIndex) {
const selectedComponent = this.editor.getSelected()
if (selectedComponent.isInstanceOf("conditional-text")) {
console.log(displayText, selectedIndex)
// selectedComponent.set("displayedText", displayText)
selectedComponent.set("selectedConditionIndex", selectedIndex)
// selectedComponent.getView().render()
}
},
So it's the following lines that seem to cause the crash, from what I can tell so far - if I uncomment any of these lines from the methods, the text inside the component changes upon clicking apply and the crash happens when hovering over the component :
selectedComponent.components(conditionCode)
selectedComponent.getView().render()
selectedComponent.set("displayedText", displayText)
selectedComponent.getView().render()
N.B. The custom 'conditional-text' component in my project is the same as in the jsfiddle - I have tried to reproduce the error by simplifying the rest of the code (I didn't want to copy over all of the logic from my project), but the code that matters is still being executed.
Please let me know if you require any further information.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
A reproduce on Fiddle (with vue) I can not reproduce without vue jsfiddle
Steps to reproduce the issue:
- Add a text component
- Select the text component then click the 'Convert to Conditional' button at the bottom
- Hover over the conditional text component, and then it freezes.
Seems something just trigger onHover forever

Thanks guys, I was actually able to reproduce it by wrapping the example inside Vue but I'm not sure exactly why is stuck in the loop here.
At first look, it seems to be related to Vue's Proxy observers. By comparing the demo with the previous grapesjs version it looks like not all parts are transformed in Proxies and that prevents it from being stuck.
As a quick workaround here would be to put the editor outside of Vue to prevent transforming all objects into proxies.
let editor;
Vue.createApp({
mounted() {
editor = grapesjs.init({ ... });
// ...
},
// ..
}).mount('#app')
Thanks @artf, all working perfectly now upon declaring the editor outside of the Vue instance.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4323
BUG: Performance issue while dragging component to canvas when you have 2k component on canvas
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Officia...
Issue #4576
BUG: Clicking 'wrap for style' button affects the inner components of other components inside the same text box
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.101 Reproducible demo link...
Issue #3857
BUG: Firefox issue when the user clicks on different component very fast
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? FirefoxReproducible demo link https://grapes...
Issue #6318
BUG: Unable to use transparent fill in Block media svg
GrapesJS version[X] I confirm to use the latest version of [email protected] when this issue was filedWhat browser are you using? Fir...
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.