After enabling the new builder, some emails show up, but others don't

Product Support
1

Your software
My Mautic version is: 3.3.4
My PHP version is: 7.4.11
My Database type and version is: MariaDB 10.4.14

Your problem
My problem is: I’m getting mixed results when trying to migrate to GrapesJS just to get the feel for the new builder before doing a Mautic 4 upgrade. I did the following process: enable the plugin, clear cache, add the "builder": "grapesjsbuilder" property to the old blank theme’s config.json file.

Now some of my old emails show up in the new builder, but some only display a blank page. All these emails were built on the legacy builder using the “blank” theme, being basically copies of the same “template” starting email. Is there a way I can troubleshoot it further? I cant’ figure out what’s the difference between an email that works and one that doesn’t.

These errors are showing in the log:

[2021-09-02 02:14:05] mautic.NOTICE: PHP Notice - Trying to access array offset on value of type null - in file /public_html/mautic/app/bundles/EmailBundle/Views/FormTheme/Email/_emailform_dynamicContent_entry_filters_entry_filters_entry_widget.html.php - at line 14 {"mauticTemplateVars":{"app":"[object] (Symfony\\Bundle\\FrameworkBundle\\Templating\\GlobalVariables: {})","value":null,"attr":{"class":"form-control"},"form":"[object] (Symfony\\Component\\Form\\FormView: null)","id":"emailform_dynamicContent_0_filters_0_filters___name__","name":"__name__","full_name":"emailform[dynamicContent][0][filters][0][filters][__name__]","disabled":false,"label":false,"label_format":null,"multipart":false,"block_prefixes":["form","dynamic_content_filter_entry_filters","_emailform_dynamicContent_entry_filters_entry_filters_entry"],"unique_block_prefix":"_emailform_dynamicContent_entry_filters_entry_filters_entry","translation_domain":null,"cache_key":"_emailform_dynamicContent_entry_filters_entry_filters_entry_dynamic_content_filter_entry_filters","errors":"[object] (Symfony\\Component\\Form\\FormErrorIterator: )","valid":true,"data":null,"required":true,"size":null,"label_attr":[],"compound":true,"method":"POST","action":"","submitted":false,"mauticContent":"email","mauticTemplate":"MauticEmailBundle:FormTheme\\Email:_emailform_dynamicContent_entry_filters_entry_filters_entry_widget.html.php","view":"[object] (Mautic\\CoreBundle\\Templating\\Engine\\PhpEngine: {})"},"app":"[object] (Symfony\\Bundle\\FrameworkBundle\\Templating\\GlobalVariables: {})","value":null,"attr":{"class":"form-control"},"form":"[object] (Symfony\\Component\\Form\\FormView: null)","id":"emailform_dynamicContent_0_filters_0_filters___name__","name":"__name__","full_name":"emailform[dynamicContent][0][filters][0][filters][__name__]","disabled":false,"label":false,"label_format":null,"multipart":false,"block_prefixes":["form","dynamic_content_filter_entry_filters","_emailform_dynamicContent_entry_filters_entry_filters_entry"],"unique_block_prefix":"_emailform_dynamicContent_entry_filters_entry_filters_entry","translation_domain":null,"cache_key":"_emailform_dynamicContent_entry_filters_entry_filters_entry_dynamic_content_filter_entry_filters","errors":"[object] (Symfony\\Component\\Form\\FormErrorIterator: )","valid":true,"data":null,"required":true,"size":null,"label_attr":[],"compound":true,"method":"POST","action":"","submitted":false,"mauticContent":"email","mauticTemplate":"MauticEmailBundle:FormTheme\\Email:_emailform_dynamicContent_entry_filters_entry_filters_entry_widget.html.php","view":"[object] (Mautic\\CoreBundle\\Templating\\Engine\\PhpEngine: {})","isPrototype":true,"filterType":"","filterGroup":""} []

Steps I have tried to fix the problem:
I haven’t really tried to fix it, just reverted back to the old builder. Now I’m hesitant to do a Mautic 4 upgrade. Is there a risk that I’ll need to rebuild half of my emails?

2

Can you please check if you have some errors in your browser Console. E.g. for Chrome.

It is important that you also reload your browser after enabling the plugin. To be on the save side make sure your JavaScript is not cached. E.g. by disabling the cache in the networking tab, or by using an incognito window.

3

Hi, thanks for replying!

I enabled GrapesJS again and, after clearing the cache folder and adding the builder property in config.json, I started a new session in Chrome’s Incognito mode.

When I try to edit an email that doesn’t work I get the blank builder and the following exception in cash.js:299 . It doesn’t happen with emails that load successfully in the new builder.

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'sans",' is not a valid attribute name.
    at HTMLDivElement.<anonymous> (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:3:3232)
    at w (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:3:1237)
    at m.each (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:3:4141)
    at m.attr (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:3:3197)
    at m.attr (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:3:3280)
    at r.updateAttributes (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:2:67061)
    at renderAttributes (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:2:68041)
    at render (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:2:68112)
    at r.addToCollection (https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:3:63576)
    at https://MYDOMAIN/mautic/plugins/GrapesJsBuilderBundle/Assets/library/js/grapes.min.js:3:64069

The following warning messages also show up in the browser console, both for emails that work e those that don’t work. I’m pasting them here for the sake of completeness.

When I exit the builder, this following warning printed to the console:

backbone.js:370 'gjs-get-inlined-html' command not found {level: 'warning'}

And then, when I exit the email edit mode by clicking “cancel”, I get the warning:

froala_editor.js?v96582ca8:24 Editor should be initialized before calling the destroy method.

I also noticed that the PHP notice I mentioned in my first post seem get logged every time I try to edit an email that doesn’t work in the new builder.

4

My guess is that the HTML of your email is not valid.

Can you compare the html source of the two emails? Check if the html is valid?

You can find the html in the database. Or if you don’t have access to the database you can also find the HTML in the DOM. It is in a textarea called builder-html. Or you could also check the request that gets the template in the networks tab.

5

I find i’ts a bit difficult to get what’s “invalid” on an html email document, since it’s supposed to use a lot of deprecated techniques to keep compatibility with email clients. :sweat_smile:

Here's the `tidy` output for the email that doesn't work: 
line 1 column 16 - Warning: discarding unexpected <!DOCTYPE>
line 1 column 31 - Warning: discarding unexpected <!DOCTYPE>
line 146 column 39 - Warning: <div> attribute "sans"," lacks value
line 146 column 39 - Warning: <div> attribute "helvetica," lacks value
line 146 column 39 - Warning: <div> attribute "arial," lacks value
line 146 column 39 - Warning: <div> attribute "sans-serif;" lacks value
line 146 column 39 - Warning: <div> attribute "14px;" lacks value
line 146 column 39 - Warning: <div> attribute "1.6;" lacks value
line 146 column 39 - Warning: <div> attribute "left;" lacks value
line 146 column 39 - Warning: <div> attribute "rgb(65," lacks value
line 146 column 39 - Warning: <div> attribute "65," lacks value
line 146 column 39 - Warning: <div> attribute "65);" lacks value
line 146 column 39 - Warning: <div> attribute "10px;" lacks value
line 146 column 39 - Warning: <div> attribute with missing trailing quote mark
line 99 column 9 - Warning: <table> lacks "summary" attribute
line 110 column 9 - Warning: <table> lacks "summary" attribute
line 121 column 9 - Warning: <table> lacks "summary" attribute
line 131 column 13 - Warning: <table> lacks "summary" attribute
line 136 column 33 - Warning: <table> lacks "summary" attribute
line 140 column 49 - Warning: <table> lacks "summary" attribute
line 158 column 33 - Warning: <table> lacks "summary" attribute
line 143 column 173 - Warning: trimming empty <span>
line 98 column 5 - Warning: <center> element removed from HTML5
line 109 column 5 - Warning: <center> element removed from HTML5
line 120 column 5 - Warning: <center> element removed from HTML5
line 131 column 13 - Warning: <table> attribute "align" not allowed for XHTML5
line 142 column 57 - Warning: <td> attribute "align" not allowed for XHTML5
line 146 column 1523 - Warning: <div> attribute "align" not allowed for XHTML5
line 160 column 41 - Warning: <td> attribute "align" not allowed for XHTML5
line 2 column 1 - Warning: <html> proprietary attribute "xmlns:v"
line 2 column 1 - Warning: <html> proprietary attribute "xmlns:o"
line 136 column 33 - Warning: <table> proprietary attribute "background"
line 146 column 39 - Warning: <div> proprietary attribute "open"
line 146 column 39 - Warning: <div> proprietary attribute "font-size:"
line 146 column 39 - Warning: <div> proprietary attribute "line-height:"
line 146 column 39 - Warning: <div> proprietary attribute "text-align:"
line 146 column 39 - Warning: <div> proprietary attribute "color:"
line 146 column 39 - Warning: <div> proprietary attribute "padding-top:"
line 146 column 39 - Warning: <div> proprietary attribute "padding-bottom:"
line 147 column 1 - Warning: <a> proprietary attribute "background"
...and the outrput for the email that works 
line 1 column 16 - Warning: discarding unexpected <!DOCTYPE>
line 1 column 31 - Warning: discarding unexpected <!DOCTYPE>
line 1 column 46 - Warning: discarding unexpected <!DOCTYPE>
line 1 column 61 - Warning: discarding unexpected <!DOCTYPE>
line 1 column 76 - Warning: discarding unexpected <!DOCTYPE>
line 99 column 9 - Warning: <table> lacks "summary" attribute
line 109 column 13 - Warning: <table> lacks "summary" attribute
line 114 column 33 - Warning: <table> lacks "summary" attribute
line 118 column 49 - Warning: <table> lacks "summary" attribute
line 138 column 33 - Warning: <table> lacks "summary" attribute
line 98 column 5 - Warning: <center> element removed from HTML5
line 109 column 13 - Warning: <table> attribute "align" not allowed for XHTML5
line 120 column 57 - Warning: <td> attribute "align" not allowed for XHTML5
line 124 column 623 - Warning: <div> attribute "align" not allowed for XHTML5
line 126 column 1228 - Warning: <div> attribute "align" not allowed for XHTML5
line 140 column 41 - Warning: <td> attribute "align" not allowed for XHTML5
line 2 column 1 - Warning: <html> proprietary attribute "xmlns:v"
line 2 column 1 - Warning: <html> proprietary attribute "xmlns:o"
line 114 column 33 - Warning: <table> proprietary attribute "background"
line 125 column 1 - Warning: <a> proprietary attribute "background"
line 127 column 1 - Warning: <a> proprietary attribute "background"

They don’t seem to contain HTML that is intrinsically “malformed”.

I don’t know if it will be of any use to try and troubleshoot this any further, since it seems to be something I probably did wrong while editing emails in the old builder. I upgraded a copy of this Mautic 3.3.4 to 4.0.0 using a staging environment and the problem is a little better: the content header and footer of the broken emails are appearing now. I’ll probably do the migration in my production server and use the old version in staging to “migrate” email content by hand.

Thank you very much for your help, @adiux !

1 Like
6

Glad I could help

1 Like