Trouble getting started with this component

[jarlenfos]

Hey all,
Having trouble figuring out how to get started with this component. I am in need of a bit of guidance on how exactly to get this up and running.

I have been cloning the project, then running yarn, yarn build then attempting to run a test.js file containing the example code through node but I am just receiving errors.

Can someone please provide me with a little guidance on how to get going.

Thanks.

[homerjam]

Hey

Could you post the errors?

[jarlenfos]

So this is what I am running:
git clone https://github.com/homerjam/mjml-mailchimp.git
cd mjml-mailchimp
yarn
yarn build

From there I create a file test.js in project root containing the code provided for usage.

**const mjml2html = require('mjml');
const { registerComponent } = require('mjml-core');
const { registerDependencies } = require('mjml-validator');
const { McSection, McImage } = require('mjml-mailchimp');

registerComponent(McSection);
registerComponent(McImage);
registerDependencies({
'mc-section': ['mj-column', 'mj-group', 'mj-raw'],
'mj-column': ['mc-image'],
'mj-hero': ['mc-image'],
});

const template = <mjml> <mj-body background-color="#f1f1f1"> <mc-section background-color="#ffffff" padding-bottom="20px" padding-top="20px"> <mj-column width="100%" vertical-align="top"> <mc-image mc:edit="image" href="https://mjml.io" src="https://via.placeholder.com/150" align="center" border="none" width="150px" padding="25px"></mc-image> </mj-column> </mc-section> <mc-section mc:repeatable="section" mc:variant="Section 1" mc:hideable background-color="#ffffff" padding-bottom="20px" padding-top="20px"> <mj-column width="100%" vertical-align="middle"> <mc-text align="center" color="#000000" font-family="sans-serif" font-size="16px" padding="25px">Hello World</mc-text> <mc-button background-color="#333333" color="#FFFFFF" font-size="15px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="3px" href="https://mjml.io" font-family="sans-serif" padding="25px">Click here</mc-button> </mj-column> </mc-section> </mj-body> </mjml>;

console.log(mjml2html(template));**

Then im running:
node test.js

This throws an error:
**internal/modules/cjs/loader.js:670
throw err;
^

Error: Cannot find module 'mjml'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
at Function.Module._load (internal/modules/cjs/loader.js:591:27)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object. (/Users/jarrad/Desktop/Projects/Development/mjml-mailchimp/test.js:1:19)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)**

[homerjam]

The example is intended to show how you would register the components in an existing (or barebones) programatic setup of mjml. But in order to fix that error you could do:

$ yarn add mjml