0

So I'm trying to do what they did over here MJML - Template Interpolation, Dynamic Data, Context but when I run node fun.js I get the following error.

file:///Users/admin/mjml/mjml/fun.mjs:2
import { compile } from 'handlebars'
         ^^^^^^^
SyntaxError: The requested module 'handlebars' does not provide an export named 'compile'

Also as a side note are there other ways to template with MJML other than the link above

My code

import { mjml2html } from 'mjml'
import { compile } from 'handlebars'

/*
  Compile an mjml string
*/

const template = compile(
  `
  <mjml>
  <mj-body>
    <mj-section background-color="#F0F0F0" padding-bottom="0">
      
      <mj-column  padding-left="70px" width="250px">
        
        <mj-text font-style="italic" font-size="22px" color="#626262">watFriends</mj-text>
        
      </mj-column>
      
      <mj-column width="170px"> 
            <mj-image width="30px" src={{logo}} />
        </mj-column>
    </mj-section>
    
    <mj-section background-color="#FAFAFA">
      <mj-column width="400px">
        <mj-text font-style="italic" font-size="15px" font-family="Helvetica Neue" color="#626262">
          Dear {{firstName}},
        </mj-text>
        <mj-text color="#525252">{{message}}
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
    
`,
)
const context = {
  firstName: '',
  message: 'hello',
  logo: 'logo.png',
}
const mjml = template(context)
const html = mjml2html(mjml)
console.log(html)
A.K.M. Adib
  • 517
  • 1
  • 7
  • 22

1 Answers1

0

try this

import { mjml2html } from 'mjml'
const Handlebars = require("handlebars");
const template = Handlebars.compile(`
  <mjml>
  <mj-body>
    <mj-section background-color="#F0F0F0" padding-bottom="0">
      
      <mj-column  padding-left="70px" width="250px">
        
        <mj-text font-style="italic" font-size="22px" color="#626262">watFriends</mj-text>
        
      </mj-column>
      
      <mj-column width="170px"> 
            <mj-image width="30px" src={{logo}} />
        </mj-column>
    </mj-section>
    
    <mj-section background-color="#FAFAFA">
      <mj-column width="400px">
        <mj-text font-style="italic" font-size="15px" font-family="Helvetica Neue" color="#626262">
          Dear {{firstName}},
        </mj-text>
        <mj-text color="#525252">{{message}}
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
    
`);
const context = {
  firstName: '',
  message: 'hello',
  logo: 'logo.png',
}
const mjml = template(context)
const html = mjml2html(mjml)
console.log(html)

also your nodej js version is old , the current is 15.0.1 , here is how you update to the current:

1-npm cache clean -f 
2-npm install -g n
3-npm install n latest

refer to documentation https://handlebarsjs.com/installation/#npm-or-yarn-recommended

سعيد
  • 1,547
  • 1
  • 14
  • 32
  • i ran the code and it gives me this error ```node:57932) ExperimentalWarning: The ESM module loader is experimental. file:///Users/admin/mjml/mjml/fun.mjs:1 import { mjml2html } from 'mjml' ^^^^^^^^^ SyntaxError: The requested module 'mjml' does not provide an export named 'mjml2html' ``` – A.K.M. Adib Oct 28 '20 at 20:45
  • can you please provide your node js version ? – سعيد Oct 28 '20 at 21:05
  • v12.18.0 is my version – A.K.M. Adib Oct 28 '20 at 22:30
  • wow that is a very old version brother , I updated my post with steps to update your node js – سعيد Oct 28 '20 at 23:46
  • okay so now i updated it to the latest version 15.0.1 and I get this error ```import { mjml2html } from 'mjml' ^^^^^^^^^ SyntaxError: Named export 'mjml2html' not found. The requested module 'mjml' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'mjml'; const { mjml2html } = pkg;``` – A.K.M. Adib Oct 29 '20 at 02:34
  • try ```const mjml2html = require("mjml"); ``` – سعيد Oct 29 '20 at 19:39