Error when registering custom component

[WineTrust-project]

Hi,

I'm new to mjml custom components, and i have an issue trying to install the boilerplate components.
I've cloned and installed successfully the project.

But when I try to run npm start, I get the following errors :
Missing or unreadable custom component : ./lib/MjBasicComponent.js
Missing or unreadable custom component : ./lib/MjImageText.js
Missing or unreadable custom component : ./lib/MjLayout.js

I've then update my .mjmlconfig file since the compiled components files are created inside /lib/component/ not /lib/ directly:

{
  "packages": [
    "./lib/components/MjBasicComponent.js",
    "./lib/components/MjImageText.js",
    "./lib/components/MjLayout.js"
  ]
}

Now when i run npm start again, I get the following errors:
Error when registering custom component : C:[...]\lib\components\MjBasicComponent.js TypeError: Cannot read property 'BodyComponent' of undefined

• same error for the 2 other native components

[18:27:50] Using gulpfile ~[...]\gulpfile.babel.js
[18:27:50] Starting 'watch'...
[18:27:51] 'watch' errored after 179 ms
[18:27:51] Error: Cannot find module 'C:[...]\lib\MjBasicComponent.js'
Require stack:

• C:[...]\gulpfile.babel.js
• C:[...]\node_modules\gulp\node_modules\gulp-cli\lib\versioned^4.0.0\index.js
• C:[...]\node_modules\gulp\node_modules\gulp-cli\index.js
• C:[...]\node_modules\gulp\bin\gulp.js

What looks strange is that the error says it can't find module that should be located in the /lib/component/ folder, not /lib/ directly.

Many thanks in advance for your help.

Cheers,

[regnerisch]

Facing the same Issue

[iRyusa]

I think this is related to Windows FS :/ Someone did find a workaround but I can't remember what he did in the gulpfile

[regnerisch]

After some fast investigation:

Changing .src(path.normalize('components/**/*.js')) to .src('components/**/*.js') forces gulp to create the components in the right directory (lib, not lib/components). But already even before the components are compiled, I get:

> gulp build

[15:58:21] Requiring external module babel-register
Missing or unreadable custom component :  ./lib/MjBasicComponent.js
Missing or unreadable custom component :  ./lib/MjImageText.js
Missing or unreadable custom component :  ./lib/MjLayout.js
Missing or unreadable custom component :  ./lib/MjBasicComponent.js
Missing or unreadable custom component :  ./lib/MjImageText.js
Missing or unreadable custom component :  ./lib/MjLayout.js
[15:58:22] Using gulpfile ~\Projekte\labor\app\src\gulpfile.babel.js
[15:58:22] Starting 'build'...
[15:58:23] Finished 'build' after 261 ms

On the secound run I get again TypeError: Cannot read property 'BodyComponent' of undefined

Edit:
The problem with path.normalize is the following: components/**/*.js is normalized to components\**\*.js, which I think can not be handled by gulp correctly.

Edit 2:
gulp is using node-glob, the "wrong" path normalization is the problem as descriped here. node-glob requires paths to be seperated with / not \ even on Windows.

[regnerisch]

After another test within a docker-container (with Linux) I'm also facing the problem TypeError: Cannot read property 'BodyComponent' of undefined I think this is not an error from windows. I will try again later with a 'real' Linux and maybe confirm this.

[iRyusa]

Weird that you have the issue on Linux as it works just fine on OSX

[regnerisch]

I did not test it on 'real' Linux, but I run the installation with yarn instead of npm. And it worked. I think the newer mjml packages cause the problem. mjml-core (where the missing BodyComponent comes from) is locked at 4.5.1 (yarn), npm installed version 4.6.3.

Maybe a solution is to add also a package-lock.json especially because most people use npm instead of yarn

How to fix this on Windows:

• Clone repository
• Change .src(path.normalize('components/**/*.js')) to .src('components/**/*.js') inside of gulpfile.babel.js (Why? See Edit and Edit 2 of comment above)
• Run yarn (NOT npm install!)
• Run yarn start/ yarn build (or npm run start/ npm run build)
• Maybe at first run some Missing or unreadable custom component Messages apear - this can be ignored (on the second run they will be gone)

[iRyusa]

Seems like it has been fixed on mjml@next tag, mjml-validator has a wrong package json nice catch !

[rootwork]

Trying this now, npm install && npm run build still fails with "missing or unreadable custom component," but yarn install && yarn build works.

The version of MJML the boilerplate calls is pretty dated now, though, so I'm hoping what it builds still works in current MJML!