homerjam/mjml-mailchimp

Trouble getting started with this component

Opened this issue · 3 comments

jarlenfos commented

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 commented

Hey

Could you post the errors?

jarlenfos commented

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 commented

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