mjmlio / mjml-component-boilerplate

A boilerplate to quickly get started when creating your own component

mjml-component-boilerplate

A boilerplate to quickly get started when creating your own component.

3 examples can be found in /components. Each of them introduce new features, so they should be checked in this order : MjBasicComponent, MjImageText, MjLayout.

For more complex examples, have a look at standard MJML components code such as mj-carousel.

Getting started

A step-by-step tutorial is available here.

• Clone the repo
• npm install inside
• Add your component inside components folder
• Add your component to the registrations in gulpfile.babel.js
• Use your own component in index.mjml
• npm run build to build, or npm start if you want to watch recompile on change you make (to your component or to index.mjml)
• The result will be outputted in index.html

Later use of your component

In Node.js

import mjml2html from 'mjml'
import { registerComponent } from 'mjml-core'
import MyComponent from './components/MyComponent'

registerComponent(MyComponent)

const { html, errors } = mjml2html(mjmlString)

With the cli

Using custom components with the CLI is not ready yet.

mjml-component-boilerplate's Issues

Error: "Missing or unreadable custom component" on first build

Hi,

after cloning the repo, running npm install and gulp build, I am facing the following error :

[16:16:06] 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
[16:16:09] Using gulpfile C:\projects\mjml-components-boilerplate\gulpfile.babel.js
[16:16:09] Starting 'build'...
[16:16:09] 'build' errored after 337 ms
[16:16:09] Error: Cannot find module 'C:\projects\mjml-components-boilerplate\lib\MjBasicComponent.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at forEach (C:\projects\mjml-components-boilerplate/gulpfile.babel.js:33:27)
at Array.forEach ()
at Pumpify. (C:\projects\mjml-components-boilerplate/gulpfile.babel.js:30:25)
at Pumpify.emit (events.js:194:15)
at Pumpify.EventEmitter.emit (domain.js:459:23)
at endReadableNT (C:\projects\mjml-components-boilerplate\node_modules\duplexify\node_modules\readable-stream\lib_stream_readable.js:1010:12)

I found my file structure to be :

• .\lib\components\MjBasicComponent.js
• .\lib\components\MjImageText.js
• .\lib\components\MjLayout.js

I'm on Windows

Update readme regarding registering of custom components

Under "Later Use of your component" the readme says:

import { registerComponent } from 'mjml-core'
import MyComponent from './components/MyComponent'

registerComponent(MyComponent)

But on line 30 of the gulpfile.babel.js we have:

registerComponent(require(fullPath).default) which is inside of the watchedComponents forEach loop. So which is it?

The later is not working for me in mjml version 4.0.3. When I use the former strategy the component is rendered out in the html.

mjml-boilerplate with 3.2.2 beta

Moving here this issue from @Laslo89

is it possible to run the boilerplate with the latest beta version?

"mjml": "~3.2.0-beta.3",
"mjml-column": "~3.2.0-beta.2",
"mjml-core": "~3.2.0-beta.2",
"mjml-image": "~3.2.0-beta.2",
"mjml-section": "~3.2.0-beta.2",
"mjml-text": "~3.2.0-beta.2",

I added the latest version myself and modified a view things in the compile function inside the gulp file.
I added the --output param
I added error notification
see below:

const compile = () => {
  gulp.src('components/**.js')
    .pipe(babel())
    .pipe(gulp.dest('lib'))
    .on('end', () => exec(
      './node_modules/.bin/mjml index.mjml --output index.html',
      (err, stdout, stderr) => {
                // NOTE: logs errors of gulp (we think at least)
                if (err) {
                    console.log('ERROR:\n', err); // eslint-disable-line no-console
                }

                // NOTE: logs the error message of our own code
                if (stdout && stdout.trim()) {
                    console.log('CODE INFO:\n', stdout); // eslint-disable-line no-console
                }

                if (stderr) {
                    console.log('CODE ERROR:\n', stderr); // eslint-disable-line no-console
                }
            }
    ));
}

when i run npm run build i run into this error:

ERROR:
 { [Error: Command failed: /bin/sh -c node_modules/.bin/mjml index.mjml --output index.html
]
  killed: false,
  code: 1,
  signal: null,
  cmd: '/bin/sh -c node_modules/.bin/mjml index.mjml --output index.html' }
CODE INFO:
 Error: EISDIR: illegal operation on a directory, open './'
    at Error (native)

I saw some changes in the cli, which i think are causing that error, but i couldn't relate them exactly. Maybe the boilerplate has to adapt to the newer version?

HTML isn't rendered on Windows

Watcher doesnt update components

The gulp-watch watcher includes the glob "components/**.js". So the components should be updated by changing the source code of a component. Currently the changes never appear while the watcher ist runnig, only if I restart the watcher. (npm start)

It seems that the import line for the component(s) never update the content. So during the runtime of the watcher gulp script the component content ist always the version of the script start.

JSX support?

Is MJML4 going to support JSX syntax?

`ReferenceError: jsonToXML is not defined` when using children within component

I'm trying to use component with children inside, like this:

    <mj-layout>
      <mj-section>
        <mj-column></mj-column>
      </mj-section>
    </mj-layout>

When compiling I get the above error in node_modules\mjml-core\lib\helpers\jsonToXML.js:19
This is the line in question.

var subNode = children && children.length > 0 ? children.map(jsonToXML).join('\n') : content ? content : '';

The code works only if I remove <mj-column></mj-column>

Does this need updating with current MJML version?

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.

Watcher doesn't update components

As originally reported by @Nikkiez in #11, changes to components are not being picked up by the watch task. When I make a change to index.mjml that updates index.html as expected, but changes within the components/ folder do not trigger a build.

I've confirmed that I'm on the latest version of Node. Any ideas?

mjml-component-boilerplate validation fails for sample custom components with editor plugins

Using vscode and the mjml plugin, there are validation errors viewing index.mjml

Removing
registerDependencies({
// Tell the validator which tags are allowed as our component's parent
'mj-hero': ['mj-basic-component'],
'mj-column': ['mj-basic-component'],
// Tell the validator which tags are allowed as our component's children
'mj-basic-component': []
})

and then adding

static dependencies = {
// Tell the validator which tags are allowed as our component's parent
'mj-hero': ['mj-basic-component'],
'mj-column': ['mj-basic-component'],
// Tell the validator which tags are allowed as our component's children
'mj-basic-component': []
}

to MjBasicComponent.js fixes the problem.

Mjml component not rendering as html. More explicit requirements for custom components?

I pulled this repo and tried making a custom component following the examples but I had a few questions about exact requirements. I also wanted to know what if anything was wrong with this specific component that I've made

Questions:

• Do the class components require "Mj" in its name or for the components themselves require "mj-" as a prefix? When I changed the names of the existing examples, they no longer worked and was wondering if there were any other naming specifics I may have missed. If this is a required detail, I believe it should be added to the documentation as people would normally name their components starting with their company/project name or whatever the component is tied to.
• What does it mean when the mjml shows up in html document but does not render as html? Can someone tell me where I have gone wrong?

For my example below, I've made a component called mj-copy-category that is supposed to render a table cell. Instead it returns nothing.

---

Steps I have taken to register this component have been:

1. Create and name component with Mj in its component name as well as its reference tag within the component folder.
2. Write code for the component as such. I used the Basic Component example as a reference as I am only passing in the text with the intent to return a styled table cell with this component

import { BodyComponent } from 'mjml-core'

export default class MjCopyCategory extends BodyComponent {
  static endingTag = true

//only parents are 'tr'
  static dependencies = {
    'mj-copy-category': [],
  }

  // Tells the validator which attributes are allowed for mj-layout
  static allowedAttributes = {
    color: 'color',
    'font-size': 'unit(px)',
    'font-family': 'string',
  }

  // What the name suggests. Fallback value for this.getAttribute('attribute-name').
  static defaultAttributes = {
    color: '#6A6A88',
    'font-size': '15px',
    'font-family': '"Helvetica"',
  }

  getStyles() {
    return {
      copyKey: {
        color: this.getAttribute('color'),
        'font-size': this.getAttribute('font-size'),
        'font-family': this.getAttribute('font-family'),
      },
    }
  }

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

3. Run the gulp build script
4. Write a reference to the component's lib file in the .mjmlconfig file
5. Place the component mj-copy-category within the index.mjml file

<mjml>
  <mj-body>
    <!-- The first component, mj-basic-component renders as a column child -->
    <mj-section>
      <mj-column>
        <mj-basic-component color="green"> I'm among stars </mj-basic-component>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-table>
          <tr>
            <mj-copy-category>Report Thing</mj-copy-category>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
    <!-- The second component, mj-image-text renders as a section -->
    <mj-image-text
      background-color="#DD685B"
      image-src="https://mjml.io/assets/img/mjml-logo.png"
      image-width="100px"
      font-size="24px"
      image-position="left"
    >
      MJML rules! hello modified
    </mj-image-text>

    <!-- The third component, mj-layout, also renders as a section -->
    <mj-layout>
      <mj-text color="pink" font-size="10px"> A super nice layout component </mj-text>
    </mj-layout>
  </mj-body>
</mjml>

(mj-column-image-text) — Attribute text is illegal

Platform: OS X 10.12.3
Program: Terminal

Build states the attribute "text" included on the mj-column-image-text is illegal, although the compile works and completes. This is not a critical problem, but I thought you might want to know in case this is not the expected behavior.

Compiling the build, I get the following output:

> [email protected] build /Users/wallace.638/Documents/Emails
> gulp build

[16:42:21] Requiring external module babel-register
[16:42:21] Using gulpfile ~/Documents/Emails/gulpfile.babel.js
[16:42:21] Starting 'build'...
[16:42:21] Finished 'build' after 9.51 ms
File: index.mjml 
Line 12 (mj-column-image-text) — Attribute text is illegal

> MJML compilation finished

NOTE: It only says line 12 and not 15 because I adjusted spacing in the .mjml file. I tried without adjusting the spacing (shouldn't matter) and got the same.

mjml-component-boilerplate component registration is wrong

.mjmlconfig

{
"packages": [
"./lib/MjColumnImageText.js"
}

It should be
{
"./lib/MjBasicComponent.js",
"./lib/MjImageText.js",
"./lib/MjLayout.js"
]
}

Npm start doesnt work on latest Node

> [email protected] start /Users/redacted/redacted/redacted/component_boilerplate
> gulp watch

[13:55:13] Failed to load external module @babel/register
[13:55:13] Requiring external module babel-register
fs.js:27
const { Math, Object } = primordials;
                         ^

ReferenceError: primordials is not defined
at fs.js:27:26
at req_ (/Users/redacted/redacted/redacted/component_boilerplate/node_modules/vinyl-fs/node_modules/graceful-fs/node_modules/natives/index.js:137:5)
at Object.req [as require] (/Users/redacted/redacted/redacted/component_boilerplate/node_modules/vinyl-fs/node_modules/graceful-fs/node_modules/natives/index.js:54:10)
at Object.<anonymous> (/Users/redacted/redacted/redacted/component_boilerplate/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:774:30)
at Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Object.require.extensions.<computed> [as .js] (/Users/redacted/redacted/redacted/component_boilerplate/node_modules/babel-register/lib/node.js:152:7)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `gulp watch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

running on Node v12.4.0

would be awesome if this was fixed on a repo level :) is there any way to fix this without downgrading the Node version I use?

Refactor gulpfile.babel.js?

Thank you for building this starter project. It has helped me a lot.

Seeing that gulp.task() isn't a recommended pattern anymore, would you be interested in a PR that revises the current build setup using Gulp's more recent API?

defaultAttributes doesn't work for attribute "padding"

Hi,

This is the first time creating my custom mjml component. I meet the issue when I want to expose an attribute named "padding" for my component. The basic description for the issue is the default value for "padding" doesn't work. My component is as below:

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

registerDependencies({
    // Tell the validator which tags are allowed as our component's parent
    'mj-body': ['mj-gb-button'],
    // Tell the validator which tags are allowed as our component's children
    'mj-gb-button': []
})

export default class MjGBButton extends BodyComponent {
    static endTag = true;
    static allowedAttributes = {
        'href': 'string',
        'padding': 'unit(px){4}'
    }

    static defaultAttributes = {
        'href': 'www.google.com',
        'padding': '30px 0px'
    }

    render() {
        return this.renderMJML(`<mj-section>
        <mj-column width="100%">
          <mj-button  ${this.htmlAttributes({
              href:this.getAttribute('href'),
              padding:this.getAttribute('padding')
          })}>
            ${this.getContent()}
          </mj-button>
        </mj-column>
      </mj-section>`)
    }
}

In index.mjml, the code is like:

<mjml>
  <mj-body>
    <mj-gb-button>test</mj-gb-button>
  </mj-body>
</mjml>

I didn't write any attribute and expect the padding could be "30px 0px", but actually nothing happens("0px") shown on my chrome. However, when I renamed "padding" to some "less standard name" such as "test-padding", the default attribute works perfectly well - shown "30px 0px" on my chrome browser.

Feel free to tell me if there's something wrong within my code since it's my first time writing custom components.

Finally, some related version information is as below:
Microsoft Windows [Version 10.0.18363.900]
Chrome [version: 83.0.4103.116]
For the npm dependencies, they are all installed according to the package.json

Thank you very much for your help!

npm install generates errors

Running npm install on a fresh clone generates tons of errors making the boilerplate not usable. Here are the first errors that occur:

node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v67-darwin-x64.tar.gz

node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp)

node-pre-gyp ERR! Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v67-darwin-x64.tar.gz

node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp)

npm install fails

• node -v is v11.5.0
• npm -v is 6.5.0
• mjml --version is 4.2.1 for both mjml-core and mjml-cli

~/Work/Bruno/mjml-component-boilerplate $ 
npm install

> [email protected] install /Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents
> node install

node-pre-gyp ERR! Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v67-darwin-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp) 
node-pre-gyp ERR! Tried to download(undefined): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.1.3/fse-v1.1.3-node-v67-darwin-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp) 
  SOLINK_MODULE(target) Release/.node
  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  CXX(target) Release/obj.target/fse/fsevents.o
In file included from ../fsevents.cc:6:
In file included from In file included from ../../nan/nan.h:../fsevents.cc203::
In file included from 6../../nan/nan_new.h:
:189In file included from :
../../nan/nan.h:203:
In file included from ../../nan/nan_new.h:189:
../../nan/nan_implementation_12_inl.h:337:28../../nan/nan_implementation_12_inl.h:: 337:warning28: : warning: 'New' is deprecated:'New'  Useis deprecated: Use
      Isolate* version 
      Isolate* version [-Wdeprecated-declarations][-Wdeprecated-declarations]

  return v8::StringObject::New(value).As<v8::StringObject>();  return v8::StringObject::New(value).As<v8::StringObject>();

                           ^
                           ^
/Users/aamnah/.node-gyp/11.5.0/include/node/v8.h/Users/aamnah/.node-gyp/11.5.0/include/node/v8.h::52415241::33::  note: note'New':  has 'New'been 
has       explicitlybeen 
marked       explicitlydeprecated  markedhere 
deprecated here
  V8_DEPRECATED("Use Isolate* version",
  ^
  V8_DEPRECATED("Use Isolate* version",
  ^
/Users/aamnah/.node-gyp/11.5.0/include/node/v8config.h:326:/Users/aamnah/.node-gyp/11.5.0/include/node/v8config.h:326:29: note: 29: expanded
      from notemacro:  'V8_DEPRECATED'
expanded
      from macro 'V8_DEPRECATED'
  declarator __attribute__((deprecated(message)))
                            ^
  declarator __attribute__((deprecated(message)))
                            ^
In file included from ../fsevents.cc:6:
../../nan/nan.h:1034:44: warning: 'ToString' is In file included from deprecated:../fsevents.cc :Use6 :
maybe ../../nan/nan.hversion:1034
:      44[-Wdeprecated-declarations]: 
warning: 'ToString' is deprecated:      v8::Local<v8::String> string = from->ToString(); 
Use maybe                                           ^ 
version
      [-Wdeprecated-declarations]
/Users/aamnah/.node-gyp/11.5.0/include/node/v8.h:2548:10: note      v8::Local<v8::String> string = from->ToString();: 
                                           ^'ToString'
 has
      been explicitly/Users/aamnah/.node-gyp/11.5.0/include/node/v8.h :marked2548 :deprecated10 :here 
note: 'ToString' has
      been explicitly marked deprecated here
  inline V8_DEPRECATED("Use maybe version", Local<String> ToString() const);
         ^
/Users/aamnah/.node-gyp/11.5.0/include/node/v8config.h:326:29:  inline V8_DEPRECATED("Use maybe version", Local<String> ToString() const); 
         ^note
: expanded
      from macro 'V8_DEPRECATED'/Users/aamnah/.node-gyp/11.5.0/include/node/v8config.h:
326:29: note: expanded
      from macro 'V8_DEPRECATED'  declarator __attribute__((deprecated(message)))

                            ^
  declarator __attribute__((deprecated(message)))
                            ^
In file included from ../fsevents.cc:6:
../../nan/nan.h:1044:27In file included from : ../fsevents.cc:6warning:
: ../../nan/nan.h'WriteUtf8': 1044is :deprecated:27 :Use  Isolate*
      warningversion:  [-Wdeprecated-declarations]
'WriteUtf8' is deprecated: Use Isolate*
      version [-Wdeprecated-declarations]
        length_ = string->WriteUtf8(str_, static_cast<int>(len), 0, flags);
                          ^
/Users/aamnah/.node-gyp/11.5.0/include/node/v8.h:2753:3: note: 'WriteUtf8' has
      been explicitly marked        length_ = string->WriteUtf8(str_, static_cast<int>(len), 0, flags); 
deprecated here                          ^

/Users/aamnah/.node-gyp/11.5.0/include/node/v8.h:2753:  V8_DEPRECATED("Use Isolate* version",3
:   ^
note: 'WriteUtf8'/Users/aamnah/.node-gyp/11.5.0/include/node/v8config.h :has
      been326 explicitly: marked29 :deprecated  herenote
: expanded
      from macro 'V8_DEPRECATED'  V8_DEPRECATED("Use Isolate* version",

  ^
/Users/aamnah/.node-gyp/11.5.0/include/node/v8config.h:326:29: note: expanded
      from macro 'V8_DEPRECATED'  declarator __attribute__((deprecated(message)))

                            ^
  declarator __attribute__((deprecated(message)))
                            ^
In file included from ../fsevents.cc:85:
../src/methods.cc:14:12: warning: 'Call' is deprecated
      [-Wdeprecated-declarations]
  handler->Call(3, argv);
           ^
../../nan/nan.h:1617:3: note: 'Call' has been explicitly marked deprecated here
  NAN_DEPRECATED inline v8::Local<v8::Value>
  ^
../../nan/nan.h:98:40: note: expanded from macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
                                       ^
In file included from ../fsevents.cc:85:
../src/methods.cc:14:12: warning: 'Call' is deprecated
      [-Wdeprecated-declarations]
  handler->Call(3, argv);
           ^
../../nan/nan.h:1617:3: note: 'Call' has been explicitly marked deprecated here
  NAN_DEPRECATED inline v8::Local<v8::Value>
  ^
../../nan/nan.h:98:40: note: expanded from macro 'NAN_DEPRECATED'
# define NAN_DEPRECATED __attribute__((deprecated))
                                       ^
4 warnings generated.
4 warnings generated.
rm: ./Release/.deps/Release/obj.target/fse/fsevents.o.d.raw: No such file or directory
make: *** [Release/obj.target/fse/fsevents.o] Error 1
  SOLINK_MODULE(target) Release/fse.node
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/aamnah/.nvm/versions/node/v11.5.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)
gyp ERR! System Darwin 18.0.0
gyp ERR! command "/Users/aamnah/.nvm/versions/node/v11.5.0/bin/node" "/Users/aamnah/.nvm/versions/node/v11.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node" "--module_name=fse" "--module_path=/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64"
gyp ERR! cwd /Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents
gyp ERR! node -v v11.5.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/Users/aamnah/.nvm/versions/node/v11.5.0/bin/node /Users/aamnah/.nvm/versions/node/v11.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node --module_name=fse --module_path=/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:978:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
node-pre-gyp ERR! System Darwin 18.0.0
node-pre-gyp ERR! command "/Users/aamnah/.nvm/versions/node/v11.5.0/bin/node" "/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents
node-pre-gyp ERR! node -v v11.5.0
node-pre-gyp ERR! node-pre-gyp -v v0.6.39
node-pre-gyp ERR! not ok 
Failed to execute '/Users/aamnah/.nvm/versions/node/v11.5.0/bin/node /Users/aamnah/.nvm/versions/node/v11.5.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node --module_name=fse --module_path=/Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64' (1)
  COPY /Users/aamnah/Work/Bruno/mjml-component-boilerplate/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node
  TOUCH Release/obj.target/action_after_build.stampostinstall 700
npm WARN [email protected] requires a peer of eslint-plugin-react@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: `node install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

audited 13917 packages in 17.305s
found 127 vulnerabilities (39 low, 49 moderate, 39 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Error when registering custom component

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,

`npm build` doesn't run

Hi!

I've been trying to run this boilerplate, been unsuccessful so far.
I've tried to run it on my mac, didn't - issue:

I've then tried to run this on a docker container and found some new issues: npm run build fails:

root@f7f183d586b2:/app# npm install
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 766 packages from 421 contributors and audited 13917 packages in 17.573s
found 581 vulnerabilities (42 low, 487 moderate, 52 high)
  run `npm audit fix` to fix them, or `npm audit` for details
root@f7f183d586b2:/app# npm run build

> [email protected] build /app
> gulp build

[20:11:59] Failed to load external module @babel/register
[20:11:59] Requiring external module babel-register
internal/util/inspect.js:31
const types = internalBinding('types');
              ^

ReferenceError: internalBinding is not defined
    at internal/util/inspect.js:31:15
    at req_ (/app/node_modules/natives/index.js:137:5)
    at require (/app/node_modules/natives/index.js:110:12)
    at util.js:25:21
    at req_ (/app/node_modules/natives/index.js:137:5)
    at require (/app/node_modules/natives/index.js:110:12)
    at fs.js:42:21
    at req_ (/app/node_modules/natives/index.js:137:5)
    at Object.req [as require] (/app/node_modules/natives/index.js:54:10)
    at Object.<anonymous> (/app/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-06-20T20_11_59_712Z-debug.log

I guess this means that there is something wrong with some babel configuration, I just don't really know what it is.. Any idea? Thanks.

TypeError: Cannot read property 'mjml' of undefined

Hi,

This is probably an easy fix, but I'm having trouble building a very simple component.

The error I'm seeing is this:

[11:03:43] Starting 'build'...
[11:03:43] Finished 'build' after 15 ms
> MJML compilation failed:

TypeError: Cannot read property 'mjml' of undefined
    at /Users/gtomescu/Work/code/ripple/node_modules/mjml-core/lib/decorators/MJMLElement.js:137:30
    at Array.filter (native)
    at MJMLElement._this.renderWrappedOutlookChildren (/Users/gtomescu/Work/code/ripple/node_modules/mjml-core/lib/decorators/MJMLElement.js:136:37)
    at Section.renderSection (/Users/gtomescu/Work/code/ripple/node_modules/mjml-section/lib/index.js:243:17)
    at Section.render (/Users/gtomescu/Work/code/ripple/node_modules/mjml-section/lib/index.js:253:72)
    at /Users/gtomescu/Work/code/ripple/node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
    at measureLifeCyclePerf (/Users/gtomescu/Work/code/ripple/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/Users/gtomescu/Work/code/ripple/node_modules/react-dom/lib/ReactCompositeComponent.js:795:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (/Users/gtomescu/Work/code/ripple/node_modules/react-dom/lib/ReactCompositeComponent.js:822:32)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/gtomescu/Work/code/ripple/node_modules/react-dom/lib/ReactCompositeComponent.js:362:30)

And here's my code for testimonial.js:

import { MJMLElement } from 'mjml-core';
import React, { Component } from 'react';
import Section from 'mjml-section';
import Column from 'mjml-column';
import Image from 'mjml-image';
import Wrapper from 'mjml-wrapper';

// Tag Name
const tagName = 'testimonial';
// List of parent tags
const parentTag = ['mj-container'];
// If false, the component can contain MJML; if true, it can contain only plain HTML
const endingTag = false;
const defaultMJMLDefinition = {
  content: '',
  attributes: {
    'image-src': null,
    'image-align': 'center',
    'image-width': '40px',
  },
}

@MJMLElement
class Testimonial extends Component {

  renderAvatar () {
    const { mjAttribute } = this.props;

    return (
      <Section key="image">
        <Column>
          <Image align={mjAttribute('image-align')} width={mjAttribute('image-width')} src={mjAttribute('image-src')}/>
        </Column>
      </Section>
    )
  }

  render () {
    const { mjAttribute } = this.props;

    return (
      <Wrapper {...this.props}>
        this.renderAvatar();
      </Wrapper>
    )
  }
}

Testimonial.tagName = tagName;
Testimonial.parentTag = parentTag;
Testimonial.endingTag = endingTag;
Testimonial.defaultMJMLDefinition = defaultMJMLDefinition;

export default Testimonial;

Am I missing something?

Boilerplate for Rails with Webpacker?

I am facing an issue that I need to compile the component before it is sent to registerComponent.

So say I have an entry file that imports the custom component and registers like so:

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

import MjBasicComponent from './components/MjBasicComponent.js';
registerComponent(MjBasicComponent);

registerDependencies({
	'mj-column': ['mj-basic-component'],
	'mj-basic-component': [],
});

Since import MjBasicComponent from './components/MjBasicComponent.js'; will retrieve the
MjBasicComponent.js uncompiled, it will fail to register and then I get errors like:

createComponent.js:260 Uncaught TypeError: c.isRawElement is not a function
    at createComponent.js:260

BTW, my development webpacker.config.js is as follows:

const environment = require('./environment')
const path = require('path');
var env = environment.toWebpackConfig();
const merge = require('webpack-merge');

module.exports = merge({
	module: {
		rules: [
			{
				test: /\.m?js$/,
				exclude: /(node_modules|bower_components)/,
				loader: 'babel-loader',
				options: {
					presets: ['@babel/preset-env'],
				},
			},
		]
	},
	resolve: {
		alias: {
			'fs': path.resolve('node_modules/grapesjs-mjml/mocks/fs'),
			'uglify-js': path.resolve('node_modules/grapesjs-mjml/mocks/uglify-js'),
		}
	},
	target: 'web',
	externals: {
		'grapesjs': 'grapesjs',
		'jquery': 'jQuery',
	},
}, env);

Any ideas on how to compile MjBasicComponent before it is sent to the registerComponent function?

How to authorize registering the dependencies of my component?

I'm not sure I understand the static dependencies property. When I comment out this property in all the sample components (MjBasicComponent, MjImageText and MjLayout) and run gulp build it doesn't change the HTML output.

What am I not understanding?

I want to create a component that can be allowed in an mj-text but I can't.