Can't use grapesjs-mjml inside a react app.

Hello and thanks for grapesjs!

I’m running into an issue using the MJML plugin with grapesjs inside a react app.

The canvas loads but I’m not able to drop any blocks into the canvas area. Not using the the mjml plugin the canvas loads and allows for blocks to be dropped into the canvas area.

I get the following warning when using grapesjs-mjml plugin:

Invalid target position: Target collection not found, Target is not droppable, accepts [undefined], Component not draggable, acceptable by [undefined]

Here is my setup, maybe I’m missing something simple.

"grapesjs": "^0.16.30",
"grapesjs-mjml": "^0.3.4",

import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';
import grapesjsMJML from 'grapesjs-mjml';
import React, { useEffect } from 'react';

export const Editor = () => {
    useEffect(() => {
        const editor = grapesjs.init({
            container: '#email-editor',
            fromElement: true,
            avoidInlineStyle: false,
            panels: { defaults: [] },
            plugins: [grapesjsMJML],
            pluginsOpts: {
                [grapesjsMJML]: {}
            },
            height: '300px',
            blockManager: {
                appendTo: '#email-editor-blocks',
            }
        });
    }, []);
    return (
        <div>
            <div id="email-editor" />
            <div id="email-editor-blocks" />
        </div>
    );
};

[edward-vo]

Try adding

<mjml>
  <mj-body>
    <mj-section>
    </mj-section>
  </mj-body>
</mjml>

It can be done thru editor.addComponents or fromElement

[DRoet]

Hmm interesting, I’ve had problems in the past using VueJS (https://github.com/artf/grapesjs-mjml/issues/155) but I haven’t seen this error before.

Does the block manager get rendered correctly? also could you try the unminified build aswell and see if that work:

import grapesjsMJML from 'grapesjs-mjml/dist/grapesjs-mjml'