Mjml: EmptyMJMLError with included header

[br4nnigan]

So i updated my globally installed mjml from 3.0.2 to 3.2.2 and now I try to compile something where i have use mj-include for a header part and get this error (it worked with the older version):

Error: [MJMLError] EmptyMJMLError: No root "<mjml>" or "<mj-body>" found in the file, or "<mj-body>" is empty

Is this working as intended?

[iRyusa]

Hi @br4nnigan

Can you provide some code about this ? Can you test it with latest MJML 3.3 beta ?

Thanks

[br4nnigan]

Simplified code:

header.mjml:

<mjml>
<mj-head>
</mj-head>
<mj-body>

template.mjml:

<mj-include path="./header" />
  <mj-section>
    <mj-column>
      <mj-text>hey</mj-text>
    </mj-column>
  </mj-section>
</mj-body>
</mjml>

> mjml template.mjml

Gonna test with 3.3beta

[br4nnigan]

Same result with 3.3.0-beta.6

[br4nnigan]

Found the real culprit: the code i posted works, but if you add a mj-head to header.mjml it breaks (doesn't matter if mj-head has contents):

<mjml>
<mj-head>
</mj-head>
<mj-body>

[br4nnigan]

Sorry for the mess but i'm getting very inconsistent results.

[dalefish]

Try going back to 3.1.1 (with inline removed). I heavily rely on includes
(nested includes too) with no issue in 3.1.1

Kind Regards,

:----------------------------:
Dale McConnell

On 27 February 2017 at 14:15, br4nnigan [e-mail] wrote:

Sorry for the mess but i'm getting very inconsistent results.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/566#issuecomment-282716816, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AKxLODk65wtsHVPCYdBqBdAwKDLX0qzVks5rgsx5gaJpZM4MM-6k
.

[iRyusa]

Can you provide the full template please?

If you have a mj-head inside a included template it will be added to the main template, cf #367

You have 2 choice to include a file:

Either it has directly content without surrounding mjml/mj-body/mj-head so the include is replace by content like:

<mj-text>Inline replace!</mj-text>

Or you can include a complete document so it will add the mj-head to the main document and the content inside mj-container will replace the <mj-include> like:

<!-- head.mjml -->
<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="header-button" font-size="32px" />
    </mj-attributes>
  </mj-head>
  <mj-body>
     <mj-container>
       <!-- Everything here will be included -->
       <mj-text align="center">
         <h1>Hello from header</h1>
       </mj-text>
       <mj-button mj-class="header-button">Click me</mj-button>
     </mj-container>
  </mj-body>
</mjml>

```xml

[br4nnigan]

@iRyusa the documentation says that wrapping tags (mjml > mj-body > mj-container) in included files is optional, but apparently i have been using this feature too wildly, for the current version that is. By the way if i remove the white space in the mj-head of my example the code does not break. So I can't imagine this is working as intended anyway.

My Idea was to create several mails with reusable header and footer.

The code i posted is the complete example.

[iRyusa]

As I said from my earlier comment it's optional, just adding them allow you to use mj-head inside a partial.
Documentation isn't really clear about this change introduce in 3.2, we'll have to update this.

[simon-am]

@br4nnigan Did you work out a way of <mj-include> a <mj-head>. Or any way of having global styles across different templates? Really struggling with this. Including a full template with a <mj-head> seems to break the main template.

[iRyusa]

@simon-am Can you share some code about this please ?
https://github.com/mjmlio/mjml/issues/566#issuecomment-282717619 Should be relevant

[simon-am]

@iRyusa thanks for getting back
So the below does not render the 'main body'.

<!-- head.mjml -->
<mjml>
  <mj-head>
    <mj-attributes>
      <!-- This to be applied globally on main.mjml and others -->
      <mj-section background-color="#ffffff" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>Some global text</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

<!-- main.mjml -->
<mjml>
  <mj-body>
    <mj-include path="head.mjml" />
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>Main body</mj-text>
        </mj-column>
      </mj-section>
    </mj-container >
  </mj-body>
</mjml>

My original set up had the head.mjml opening the mjml>mj-body tags and a footer.mjml closing them. I think 3. onwards broke this? I think I understand that every mjml template should now have full opening and closing tags? This makes sense but struggling to make it work.

[iRyusa]

Just put the <mj-include path="head.mjml" /> inside mj-container and then it should work.
You can't have more than 1 elements inside mj-body

[simon-am]

@iRyusa Brilliant - thanks so much.

[mrksbnch]

This does not work for me in the latest version (mjml-core: 4.0.1, mjml-cli: 4.0.3):

<!-- hero.mjml -->
<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class
        name="class-name"
        full-width="full-width"
        padding="0"
      />
    </mj-attributes>
  <mj-head>
  <mj-body>
    <mj-section mj-class="class-name">
      <mj-column>
        <mj-text padding="0 25px" color="#fff">
          Enroll a device for multi-factor authentication.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

<!-- main.mjml -->
<mjml>
  <mj-head>
  </mj-head>
  <mj-body>
    <mj-include path="./partials/hero.mjml" />
  </mj-body>
</mjml>

It does just output an empty <div> in <body>.

EDIT: It works if I remove <mj-head> but not with it.

[jdotjdot]

I'm finding when I have a partial using <mj-include> that has an <mj-head> with content in it (generally <mj-attributes>, when I add the <mj-include> to my main document, it stops rendering everything below the include. When I remove the <mj-head> component, the full document renders, including the partial.

In order to include an <mj-head>, the partial is built as a fully-built MJML document, like so:

<mjml>
  <mj-head>
    <mj-attributes>...</mj-attributes>
  </mj-head>
  <mj-body>
    ...
  </mj-body>
</mjml>

[iRyusa]

Hi, can you please open an issue with everything to reproduce so we can take a look. This one is closed and not related to both of your issues. Thanks

On 10 Jun 2018, at 01:52, JJ Fliegelman [e-mail] wrote:

I'm finding when I have a partial using that has an with content in it (generally , when I add the to my main document, it stops rendering everything below the include. When I remove the component, the full document renders, including the partial.

In order to include an , the partial is built as a fully-built MJML document, like so:

...


...


—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or mute the thread.

[kmcb777]

Hi @jdotjdot, as iRyusa said please open a new issue and provide the exact mjml you're using, I was unable to reproduce this issue.
@mrksbnch I tested with your example above, and it turns out the <mj-head> is not properly closed in hero.mjml, the / is missing. If i add it then the include renders correctly.