mj-include tag throwing errors on style import and imports in the head tag

[webletm]

So I've checked the fix for this in bafb24a, and followed the structure but I still get errors. It could be due to my set-up.

I have a file.mjml, which contains most of the markup. But I include files like <mj-include path="./_includes/head.mjml" /> so that I can have multiple templates with the same styles and structure. I'm sure you can guess by now that I also include the style in the head.mjml.

so my full code is:

<mjml>
  <mj-head>
    <mj-title>Welcome to Pores X</mj-title>
    <mj-include path="./_includes/head.mjml" />
  </mj-head>
  <mj-body css-class="body-class" width="585px">....`
and then in my head.mjml its:
`<mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto" />
<mj-attributes>
    <mj-text padding="0px" font-size="18px" line-height="28.88px" />
    <mj-section padding="40px 0 0" border="none" />
    <mj-column padding="0px" />
    <mj-image padding="0px" />
    <mj-class name="section" padding="32px 0 0" />
    <mj-class name="hero-section" padding="32px 0 0" />
    <mj-button font-size="18px" background-color="#FBCF89" />
    <mj-class name="section-header-title" font-size="33.18px" align="center" />
    <mj-class name="footer" padding-bottom="32px" padding-top="48px" />
    <mj-class name="footer-section" padding="24px" />
    <mj-class name="socials-section" padding-top="0" />
    <mj-class name="socials-section-column" padding="0" />
    <mj-class name="hero-section-full" padding="0" />
    <mj-class
        name="booking-table-column"
        background-color="#FDE5DF"
        padding="48px 40px 40px"
        border-radius="10px"
        overflow="hidden"
    />
    <mj-class name="section-header-section" padding="0 24px 0" />
    <mj-class name="hero-star" padding="24px 24px 0" />
    <mj-all font-family="Roboto, Helvetica , Arial, sans-seri" />
</mj-attributes>
<mj-style>
    mj-text { font-size: 18px; line-height: 1.6; } @media only screen and
    (max-width: 480px) { mj-text { font-size: 16px; } } .hero-section-full
    .mobile { display: none; } @media only screen and (max-width: 480px) {
    .hero-section-full .desktop { display: none !important; } .hero-section-full
    .mobile { display: block !important; } }
</mj-style>
<mj-include path="../_css/default-inline.css" type="css" css-inline="inline" />
<mj-include path="../_css/default.css" type="css" />

for some reason, the mj-include tag is giving me errors on both the head.mjml and the CSS files:

_includes/head.mjml - Error while rendering the file : TypeError: Cannot read properties of undefined (reading 'push') _css/default-inline.css - Error while rendering the file : Error: Parsing failed. Check your mjml. _css/default.css - Error while rendering the file : Error: Parsing failed. Check your mjml.

and I can't for the life of me work this out

[iRyusa]

Did you used watch for this ? Does it render the file at least ?

[webletm]

i did use watch and it was rendering the files but I'm just worried in case something is going wrong.

[iRyusa]

Try without watch it might be because of #2823 that should be fixed soon

[webletm]

So I tried it without watch and I would get the same output. It breaks the email (shown in the screenshot).

After fiddling around, I think it's something to do with the way the CSS has been imported. I have followed the documentation for this and it's still showing errors for the CSS imports with the mj-include.

Are you able to explain if I'm doing it correctly or not? And If not, how should I be including CSS for inline and responsive? I really need them in separate files because I am building a bunch of emails that should all have the base styles carried across from each email, and as the emails are updated, the styles are updated across all of them too.

[iRyusa]

Can you try to open a repo to reproduce, it’s a bit hard to guess what could happen without playing with it.On 19 Mar 2024, at 01:10, Miroslav Naskovic @.***> wrote: So I tried it without watch and I would get the same output. It breaks the email (shown in the screenshot). After fiddling around, I think it's something to do with the way the CSS has been imported. I have followed the documentation for this and it's still showing errors for the CSS imports with the mj-include. Are you able to explain if I'm doing it correctly or not? And If not, how should I be including CSS for inline and responsive? I really need them in separate files because I am building a bunch of emails that should all have the base styles carried across from each email, and as the emails are updated, the styles are updated across all of them too. Screenshot.2024-03-19.at.11.06.24.AM.png (view on web)

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>