Does this need updating with current MJML version?

[rootwork]

First I confess that even after reading the documentation and the tutorial, I'm not 100% sure how I'm supposed to load the custom components in a project, once I've built them.

I take it from what's written that I use the built version from /lib of, say, MjBasicComponent.js and include it this way:

const mjml = require('gulp-mjml')
const mjmlEngine = require('mjml')
const { registerComponent } = require('mjml-core')
const MjBasicComponent = require('./components/MjBasicComponent.js')
registerComponent(MjBasicComponent)

[...]

function build (cb) {
  return pipeline(
    mjml(mjmlEngine, options),

    [...]
  )
}

(I realize I'm using gulp-mjml and a more modern version of Gulp syntax than what the tutorial uses, and not using Babel, so maybe that's the source of some of my issues.) But when I do that I get either:

Error in file index.hbs: c.isRawElement is not a function

if I haven't used the <mj-basic-component> tag, or:

Error in file index.hbs: ValidationError: 
 Line # of /templates (mj-basic-component) — Element mj-basic-component doesn't exist or is not registered

if I have.

So then I thought maybe it was an issue with the current version of MJML (4.10.0) being newer than what's specified in the boilerplate (4.7.1). But if I try to bump up the version in package.lock, and then yarn install, yarn build fails with:

mjml-component-boilerplate/node_modules/mjml-core/lib/index.js:66
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
                       ^
TypeError: _interopRequireDefault is not a function

so I'm guessing some of the other packages need to be updated too.

[rootwork]

I realized after I posted this that I'm really conflating a (possible) bug report with a support request. So let me make them clearer:

Should the boilerplate as it currently exists work with the current version (4.10.0) of MJML?

If so, can I request a pointer on what I'm doing wrong in terms of actually using a custom component? If the answer is "don't use gulp-mjml," since the tutorial doesn't, then I'll start there.

[iRyusa]

mjml 4.10.0 has an open issue when upgrading from previous version, removing the node modules+lock file should do the trick here (should be solved in 4.10.1 this week)

Can you check what MjBasicComponent looks like ? you might need to require('./components/MjBasicComponent.js').default as we do in our gulpfile.

[rootwork]

Hmm, using require('./components/MjBasicComponent.js').default, even with 4.10.1 released today, doesn't seem to work, but it's in the midst of my build stream. I'll try isolating it on its own and see if I still get the error, so I can report back with more confidence.

[rootwork]

OK, I was able to isolate it, and it does work -- so it must be some bug in my build that I'll work out.

In the process, I created an example repo that more explicitly explains how to use a custom component once it's created, and uses updated Gulp syntax.

So for anyone else who stumbles across this and is dense like me, maybe that example will help :)

If you think any of the documentation from my example would be helpful here, let me know and I'll create a PR. Otherwise you can close.