Invalid format error when upgrading to v2

[Richard Taylor]

I've just upgraded our app to the recently released v2 and I'm now getting errors parsing our MJML templates (they were fine on v1.5.0).

I've tested them in the online editor and they render fine there. Here's an example:

template ="""
<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="'Inter', 'Helvetica', 'Arial', sans-serif"></mj-all>
    </mj-attributes>
    <mj-font href="https://fonts.googleapis.com/css?family=Inter:normal,italic,bold&display=swap" name="Inter">
    </mj-font>
    <mj-title>Company</mj-title>
    <mj-preview>Reset your password</mj-preview>
  </mj-head>
  <mj-body background-color="#EEEDEA">
    <mj-section background-color="#fff" border-bottom="none" border-left="none" border-right="none" border-top="10px solid #F00" padding-bottom="0px" padding-left="40px" padding-right="40px" padding-top="20px">
      <mj-column padding="0">
        <mj-image src="https://dev.example.com/images/email/logo.png" align="center" border="none" width="50px" height="50px" border-radius="10px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0">
        </mj-image>
        <mj-spacer height="30px"></mj-spacer>
        <mj-text align="center" color="#231F20" font-family="'Inter', 'Helvetica', 'Arial', sans-serif" font-size="24px" line-height="1.25" padding="10px">
          Reset your password
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#fff" border-radius="0px 0px 10px 10px" padding-bottom="0px" padding-left="40px" padding-right="40px" padding-top="0px">
      <mj-column padding="0">

        <mj-text align="center" color="#231F20" font-size="16px" line-height="1.5" padding="10px">
          <span style="word-spacing: normal;">
            You can reset your password by clicking the button below
          </span>
        </mj-text>
        <mj-spacer height="30px"></mj-spacer>
        <mj-button background-color="#F00" border-radius="10px" color="#fff" font-size="16px" line-height="1.5" padding="0px" width="100%" font-weight="bold" href="https://google.com">

          Reset your password <span aria-hidden="true">→</span>

        </mj-button>

        <mj-spacer height="50px"></mj-spacer>
      </mj-column>
    </mj-section>
    <mj-section padding="20px">
      <mj-column padding="0">
        <mj-text align="center" color="#acacac" font-size="12px" line-height="1.5" padding-bottom="10px" padding-left="50px" padding-right="50px" padding-top="10px" padding="10px">
          &copy; Company
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
"""

Mjml.to_html(template)
{:error, "invalid format at position 250..251"}

[Paul Götze]

Hey @moomerman, thanks for opening the issue. I saw something similar with a template of mine:

Can you try removing your <mj-font> tag from the template and pass a fonts option to Mjml.to_html/2 instead, like this:

Mjml.to_html(your_mjml, fonts: %{
  "Inter": "https://fonts.googleapis.com/..."
}

Then you should be able to use the configured font as before in your template, and it should add an <mj-font> tag for that font to the rendered HTML.

[Paul Götze]

@moomerman I just published v3.0 with which the issue should be fixed. (No breaking changes from our side, just it uses mrml v3.0 and we keep our major versions in sync with that, see Changelog).

So if you update to v3.0.0 you can now either put the self-closing <mj-font …/> or <mj-font …></mj-font> tag to your email template or you can use the fonts rendering option as in the example above. Both will work.

[Richard Taylor]

Thanks @paulgoetze - I updated to the latest release and all looks good now. Thanks for the help!