Unable to Add Components to Blank Canvas

After digging into a bug my team has seen after upgrading from grapesjs v0.18.4 to v0.19.5. I started looking into the grapesjs-mjml plugin specifically to see if this could be the thing causing it and appears this might be the cause.

Specifically, when we start with a blank canvas, we are now unable to add components. When there are already components on the canvas, I can perform all the normal CRUD operations with components using the DnD functionality.

Bug Summary:

When the canvas is is blank, I cannot add components, however, when there are already components on the canvas, I can add them without issue. It is unclear if there is any correlation with grapesjs’s changes from 0.18.4 to 0.19.5.

With Components (default example from grapesjs-mjml after running npm run start):

screen-capture (21).webm

Without Components (i.e., all components deleted so that all is left is a blank canvas):

screen-capture (22).webm

Full Warning/Error Output:

{
    "errors": [
        "Target collection not found",
        "Component not draggable, acceptable by [[data-gjs-type=mj-body], [data-gjs-type=mj-wrapper]]"
    ],
    "model": {
        "tagName": "mj-section",
        "type": "mj-section"
    },
    "context": "sorter",
    "level": "warning"
}

[Drew-Daniels]

You can update the commit #296

That’s what I’d like to do, however the more I’ve looked into this today it appears that the problem I’m facing in my setup might be a problem with using grapesjs-mjml with React https://github.com/artf/grapesjs-mjml/issues/223 . Going to keep looking into this further to see if I can get a better idea of what’s going on.

[Drew-Daniels]

Huh, that works for me as well… Thanks for sharing that! I’ll try using this fix in the project I’m working on and see if that works there also. Might be something to push up in a PR to this repo.