MJML: mj-include fails to read file

Question

Firstly, I am new at emails markup. So I decided to use mjml to construct a letter but I faced the problem - markup doesn't being rendered properly: MJML doesn't include components and I can't understand why. Project was created using npm package mjml-component-boilerplate because I wanted to register my own components.

my index.mjml

<mj-body>
    <mj-include path="./components/blocks/header.mjml" />
    <mj-include path="./components/blocks/main.mjml" />
    <mj-include path="./components/blocks/footer.mjml" />
  </mj-body>

part of output index.html (the same with main.mjml and footer.mjml)

<div>
        <!-- mj-include fails to read file : ./components/blocks/header.mjml at D:\projects\ctc_projects\chetv\site\reshala_promo\email\components\blocks\header.mjml -->

header.mjml

<mj-section>
    <mj-column>
        <mj-div css-class="header">
            <mj-image
                    src="/assets/images/logo.png"
                    alt="ЧЕ!"
                    title="https://chetv.ru/"
                    href="https://chetv.ru/"
                    target="__blank"
                    css-class="header__logo"
            />
        </mj-div>
    </mj-column>
</mj-section>

and, for a case, if it will make any sense my MjDiv component

import { registerDependencies } from 'mjml-validator'
import { BodyComponent } from 'mjml-core'

registerDependencies({
    'mj-body': ['mj-div'],
    'mj-column': ['mj-div'],
    'mj-section': ['mj-div'],

    'mj-div': [
        'mj-text', 'mj-image', 'mj-accordion',
        'mj-carousel', 'mj-divider', 'mj-group',
        'mj-navbar', 'mj-raw', 'mj-social',
        'mj-div', 'mj-a', 'mj-p', 'mj-h1'
    ]
});

export default class MjDivComponent extends BodyComponent {
  static endingTag = true;

  static allowedAttributes = {
      'css-class': 'css-class',
      'style': 'style'
  };

  render() {
    return `<div
        ${this.htmlAttributes({
          class: this.getAttribute('css-class'),
          style: this.getAttribute('style')
        })}
      >${this.getContent()}</div>`;
  }
}

Answer 1

You demonstrate putting the <mj-include> components after <mj-body> (as demonstrated in https://mjml.io/documentation/#mj-include). It doesn't work for me there.

It does work for me when I put the <mj-include> elements after <mj-head>. Good luck!

I'm interpreting the rest of your post as background, not asking another question. Let me know if otherwise.

By the way: Besides stackoverflow, another great source of MJML information is https://mjml.slack.com.