'Grapesjs with grapesjs-mjml plugin does not convert MJML to HTML

I just setup grapesjs editor by example with mjml plugin and it simply does not convert MJML to HTML. Error is inside minified code of plugin.

I am using versions

  • 0.18.4 grapesjs
  • 0.6.0 grapesjs-mjml

Chrome console

grapesjs-mjml.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at e.default (grapesjs-mjml.min.js:2:1267707)
    at e.default (grapesjs-mjml.min.js:2:10566)
    at d (grapesjs-mjml.min.js:2:1537200)
    at u (grapesjs-mjml.min.js:2:1576336)
    at Z.r.run (grapesjs-mjml.min.js:2:1576433)
    at Z.r.callRun (grapes.min.js:2:353040)
    at Object.runCommand (grapes.min.js:2:350114)
    at Object.run (grapes.min.js:2:349652)
    at Object.runCommand (grapes.min.js:2:883122)
    at EmailEditor.getHtml (EmailEditor.ts:132:28)
mjmlgrapesjs


Solution 1:[1]

The problem is in <body> tag which wraps mjml document. You need to remove this tag entirely. More info in existing issue on gitgub.

Your mjml code is like this:

<body>
  <mjml>
    <mj-head id="ilnn">
       <mj-raw>
       ...
  </mjml>
</body>

And it would be like this.

<mjml>
  <mj-head id="ilnn">
    <mj-raw>
     ...
</mjml>

The solution is to override wrapper component toHTML() method.

const editor = grapesJS.init(editorConfig);

editor.getWrapper().toHTML = function(opts) {
  return this.getInnerHTML(opts);
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vladimír Mlázovský

Related Questions