Issue #4497πŸ’¬ AnsweredOpened August 3, 2022by benryanwilliams3 reactions

Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive

Quick answerby tyuterry❀ 1

A reproduce on Fiddle (with vue) I can not reproduce without vue jsfiddle Steps to reproduce the issue:Add a text componentSelect the text component then click the 'Convert to Conditional' button at the bottomHover over the conditional text component, and then it freezes. Seems something just trigger onHover forever

Read full answer below ↓

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:

  1. Click on a 'conditional-text' component (custom component type I've added)
  2. Click on 'Open Conditionals' button then within the dialog that appears on the screen, click 'Apply'
  3. Hover the cursor over the 'conditional-text' component

In JSFiddle (currently doesn't crash but I will continue to test):

  1. Click on the 'Hello World' text component
  2. Click on the 'Convert to Conditional' button at the bottom of the page
  3. Click on the newly created 'conditional-text' component (with the text "Open conditionals to choose text")
  4. Click on the 'Change Conditional' button at the bottom of the page
  5. 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:

https://user-images.githubusercontent.com/67364267/182598233-29209c1b-b99e-438c-9d9a-3e46dd750a31.mov

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 (4)

tyuterryβ€’ August 11, 2022

A reproduce on Fiddle (with vue) I can not reproduce without vue jsfiddle

Steps to reproduce the issue:

  1. Add a text component
  2. Select the text component then click the 'Convert to Conditional' button at the bottom
  3. Hover over the conditional text component, and then it freezes.

Seems something just trigger onHover forever image image

artfβ€’ August 12, 2022

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')
benryanwilliamsβ€’ August 15, 2022

Thanks @artf, all working perfectly now upon declaring the editor outside of the Vue instance.

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @benryanwilliams.

Great question about Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive. The recommended approach with Canvas is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

  • Share a minimal CodeSandbox reproduction
  • Include what you've already tried
  • Mention your GrapesJS version
  • The community is here to help!

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.