Error 'Cannot read property 'replace' of undefined' in latest version

[Riley-]

I'm getting an error when updating to the latest version (0.4.0), from the previous version. The error prevents the page from rendering.

index.js?:formatted:49863 Uncaught (in promise) TypeError: Cannot read property 'replace' of undefined

Which relates to:

function(t, e) {
        "use strict";
        Object.defineProperty(e, "__esModule", {
            value: !0
        }),
        e.default = void 0,
        e.default = function $Ie(t) {
            return t.replace(/(<!--\[if\s[^\]]+]>)([\s\S]*?)(<!\[endif]-->)/gm, function(t, e, r, n) {
                return r = r.replace(/(^|>)(\s+)(<|$)/gm, function(t, e, r, n) {
                    return "".concat(e).concat(n)
                }).replace(/\s{2,}/gm, " "),
                "".concat(e).concat(r).concat(n)
            })
        }
        ,
        t.exports = e.default
    }

Using Grapes version 0.15.10.

[DRoet]

hmm this seems to be related to mjml-browser, do you have a more complete stacktrace? Also which browser are you using?

[Riley-]

Tested in Chrome, Edge and Firefox, occurs in all of them.

Chrome and Edge console error output:

index.js:1 Uncaught TypeError: Cannot read property 'replace' of undefined
    at $Ie (index.js:1)
    at mjml2html (index.js:1)
    at mjmlConvert (utils.js:23)
    at r.getTemplateFromMjml (Style.js:40)
    at render (index.js:248)
    at r.addToCollection (grapes.min.js?a826:3)
    at eval (grapes.min.js?a826:3)
    at Function.m.each.m.forEach (grapes.min.js?a826:2)
    at r.eval [as each] (grapes.min.js?a826:2)
    at render (grapes.min.js?a826:3)

Firefox console output:

Uncaught TypeError: t is undefined
    $Ie index.js:1
    mjml2html index.js:1
    mjmlConvert utils.js:23
    getTemplateFromMjml Style.js:40
    render index.js:248
    addToCollection grapes.min.js:3
    render grapes.min.js:3
    forEach grapes.min.js:2
    a/</t.prototype[i]</< grapes.min.js:2
    render grapes.min.js:3
    renderChildren grapes.min.js:2
    render grapes.min.js:2
    addToCollection grapes.min.js:3
    render grapes.min.js:3
    forEach grapes.min.js:2
    a/</t.prototype[i]</< grapes.min.js:2
    render grapes.min.js:3
    renderChildren grapes.min.js:2
    render grapes.min.js:2
    addToCollection grapes.min.js:3
    render grapes.min.js:3
    forEach grapes.min.js:2
    a/</t.prototype[i]</< grapes.min.js:2
    render grapes.min.js:3
    renderChildren grapes.min.js:2
    render grapes.min.js:2
    render grapes.min.js:12
    renderBody grapes.min.js:12
    I grapes.min.js:2
    r grapes.min.js:2
    x grapes.min.js:2

[Riley-]

Upgraded to grapesJS 0.16.34. The error is still present in ^0.4 of grapesjs-mjml. As you've mentioned it is likely related to mjml-browser.

Not sure if this helps, but some more information:

m | @ | grapes.min.js?a826:2
v | @ | grapes.min.js?a826:2
d | @ | grapes.min.js?a826:2
c.trigger | @ | grapes.min.js?a826:2
log | @ | grapes.min.js?a826:2
logError | @ | grapes.min.js?a826:2
addToCollection | @ | grapes.min.js?a826:2
eval | @ | grapes.min.js?a826:2
Te | @ | grapes.min.js?a826:2
eval | @ | grapes.min.js?a826:2
render | @ | grapes.min.js?a826:2
renderChildren | @ | grapesjs-mjml.min.js?f4df:1
render | @ | grapesjs-mjml.min.js?f4df:1
addToCollection | @ | grapes.min.js?a826:2
eval | @ | grapes.min.js?a826:2
Te | @ | grapes.min.js?a826:2
eval | @ | grapes.min.js?a826:2
render | @ | grapes.min.js?a826:2
renderChildren | @ | grapes.min.js?a826:2
render | @ | grapes.min.js?a826:2
addToCollection | @ | grapes.min.js?a826:2
eval | @ | grapes.min.js?a826:2
Te | @ | grapes.min.js?a826:2
eval | @ | grapes.min.js?a826:2
render | @ | grapes.min.js?a826:2
renderChildren | @ | grapes.min.js?a826:2
render | @ | grapes.min.js?a826:2
addToCollection | @ | grapes.min.js?a826:2
addTo | @ | grapes.min.js?a826:2
m | @ | grapes.min.js?a826:2

[paya-cz]

I get this error when trying to use grapesjs-mjml in Angular v11. At first I thought this is caused by some collision with a third-party package. But then I created a brand-new Angular v11 app and added grapesjs and grapesjs-mjml into it. Got this error again. I guess grapesjs-mjml is not compatible with Angular.

[paya-cz]

So for me, the error Cannot read property 'replace' of undefined was caused by Angular injecting _ngcontent attributes inside of the grapesJs designer HTML.

Once I put grapesJs designer into a separate HTML file, and use iframe in Angular to embed the designer inside of Angular app, the error went away. You can use window.postMessage to move data back and forth between Angular and the iframe.

[artf]

Closing this one as it sounds like unrelated to the core or the plugin itself. If you still believe there is an issue, please provide a reproducible demo.