Boilerplate component showing errors in MJML App

[alfredtan]

Describe the bug We've downloaded the MJML Component Boilerplate (package.json showing version 1.0.1) and we can build the components and the provided index.mjml successfully.

We use the MJML Desktop App for development (we have non-coders) and these are the version under "About": MJML App v3.0.2 MJML V^4.6.2

Within the App, we've pointed to the .mjmlconfig of the custom components. When we open the provided index.mjml inside the App, it is showing these errors in the screenshot at the bottom.

All the errors are identical:

• "mj-basic-component cannot be used inside mj-column, only inside: mj-attributes
• "mj-image-text" cannot be used inside mj-body, only inside: mj-attributes
• "mj-layout" cannot be used inside mj-body, only inside: mj-attributes
• "mj-text" cannot be used inside mj-layout, only inside: mj-attributes, mj-column, mj-hero

For the last one, i can see the 'mj-text' is allowed as a child of 'mj-layout' but it's still showing error. Apart from these, exporting index.mjml to HTML within the app works as expected.

To Reproduce Steps to reproduce the behavior:

1. Clone https://github.com/mjmlio/mjml-component-boilerplate and install/build following the instruction
2. Open the MJML App and point the .mjmlconfig to the path in step #1
3. Open the index.mjml of the boilerplate within App
4. The App should be showing the error per the image below.
5. Exporting index.mjml to HTML should work as expected

Expected behavior The red errors shouldn't show?

Screenshots

Environment (please complete the following information):

• OS: Mac
• App Version MJML App v3.0.2 MJML V^4.6.2

Additional context Add any other context about the problem here.

[alfredtan]

Also, seems that any HTML content that is inside the custom component doesn't get rendered in the App. It's just blank, and exporting is blank too. It's using the boilerplate mj-layout component, except that it has a HTML strong in the content. Notice the green arrow is showing blank content.

Not sure if it's related to the main issue above?

[alfredtan]

Hello, any help here?

Thank you.

[kmcb777]

Hi @alfredtan sorry for the wait, I just tested and the custom components are correctly rendered (however there are indeed validation warnings that need to be fixed) Did you check this option in the settings, above the .mjmlconfig field ?

[kmcb777]

Concerning the validation warnings, it turns out that when registering components through a .mjmlconfig file, dependencies should be declared by another way to ensure they are registered by the right instance of mjml. I'll update the examples, you can already check how it's done on my PR https://github.com/mjmlio/mjml-component-boilerplate/pull/35/files

[kmcb777]

@alfredtan also, concerning mj-layout not rendering its children, it's because mjLayout is not an endingTag. You can see this line in the two other components static endingTag = true This tells the parser that any html inside this tag must be left as it is mj-layout doesn't have this, so its content will be parsed as mjml content. So here, since there is no mjml component named "strong", this tag and its content are ignored.

[alfredtan]

Hi @kmcb777 , No problems, and thank you very much. The fixes in your pull request works for me and i'm not seeing anymore errors. I will continue to test this.

Regarding mj-layout and endingTag, I thought that the HTML strong tag will be handled by mj-text, because mj-text is a child of mj-layout. In this case, is it then safer for parent tags to always have endingTag = true?

[kmcb777]

I'm not sure what you mean by "parent tags", but the 'endingTags' are only the tags that whose content is html, not mjml i.e. mj-text is an endingTag, otherwise the html tags inside it would be parsed as if they where mjml components and mj-layout musn't be an endingTag, otherwise any mjml component inside it will be left as it is, and you'd end up with <mj-text in the html output

[alfredtan]

Right, so based on what you've described above, that means mj-layout wasn't rendering correctly, am i right? Looking at this comment above, the HTML content should be rendered by mj-text (the green arrow). Or is it that, for 'mj-text' to render this HTML, 'mj-layout' MUST have endingTag = true?

Apologies if i'm not understanding this correctly.

[kmcb777]

No i thought your mj-layout wasn't rendering because you didn't check the option for custom components in the settings ? Otherwise it should render.

And no it's not that, endingTag means "This tags only contains plain html, don't parse its content, just leave it as it is" So it must NOT be applied to mj-layout, otherwise the <mj-text will not be handled, and will be left as it is in the output

[alfredtan]

Ah yes there's a confusion. Indeed you helped to solve the error messages on the editor, however mj-layout rendering issue is still there and it's actually the boilerplate code from https://github.com/mjmlio/mjml-component-boilerplate/blob/master/index.mjml, I just added 'strong'.

I posted both of them here coz I thought it's related.

[kmcb777]

Hi @alfredtan i was just investigating some problems with custom comps on the app, and i got the exact same problem with mj-layout while also using an older custom mjml engine. With the embedded mjml engine, it works fine, so i hope the problem was inside mjml and was fixed since then. Did you use a custom engine at that time ? Have you solved your problem since then ?