Use a custom mjml loader to support version 4

config/mjml-loader.js

@@ -0,0 +1,19 @@
+const mjml2html = require('mjml');
+
+module.exports = function mjmlLoader(content) {
+  this.cacheable();
+
+  const result = mjml2html(content);
+
+  if (result.errors.length) {
+    const errorMsg = `[mjml-loader] ERROR in ${this.resourcePath}:
+    ${result.errors.map(error => `- ${error.formattedMessage}`)}`;
+
+    const error = new Error(errorMsg);
+    error.code = 'MJML_INVALID';
+
+    throw error;
+  }
+
+  return `module.exports = ${JSON.stringify(result.html)};`;
+}

config/webpack.lambda.js

@@ -0,0 +1,12 @@
+const mjml2html = require('mjml');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.mjml$/,
+        loader: require.resolve('./mjml-loader.js')
+      }
+    ]
+  }
+}

package.json

@@ -18,7 +18,7 @@
     "gatsby-transformer-remark": "^1.7.40",
     "gatsby-transformer-sharp": "^1.6.22",
     "lodash": "^4.17.5",
-    "mjml-loader": "^1.0.1",
+    "mjml": "^4.0.5",
     "mongodb": "^3.0.7",
     "netlify-cms": "^1.5.0",
     "nodemailer": "^4.6.4",
@@ -39,8 +39,8 @@
     "develop": "gatsby develop",
     "serve": "gatsby serve",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
-    "lambda-start": "netlify-lambda serve src/lambda -c webpack.lambda.js",
-    "lambda-build": "netlify-lambda build src/lambda -c webpack.lambda.js"
+    "lambda-start": "netlify-lambda serve src/lambda -c config/webpack.lambda.js",
+    "lambda-build": "netlify-lambda build src/lambda -c config/webpack.lambda.js"
   },
   "devDependencies": {
     "netlify-lambda": "^0.4.0",

src/lambda/email-response.js

@@ -20,17 +20,23 @@ exports.handler = function(event, context, callback) {
 
   if (!data || !data.email) {
     console.log('data error', data);
+
     return callback(null, {
       statusCode: 400,
       body: 'Mailing details not provided'
     })
   }
 
+  const mailContent = createMailTemplate({
+    title: 'Smoothielicious',
+    name: data.name
+  });
+
   let mailOptions = {
     from: `"Maciej 🥝 Smoothielicious" <${user}>`,
     to: data.email,
     subject: "🍇 Contact submission received! 🍌",
-    html: createMailTemplate({ title: 'Smoothielicious', name: data.name })
+    html: mailContent
   };
 
   transporter.sendMail(mailOptions, (error, info) => {

src/lambda/modules/create-mail-template.js

@@ -1,5 +1,5 @@
 const mailString = require('./mail-template.mjml');
-const template = require('lodash/template')
+const template = require('lodash/template');
 
 module.exports = ({ title, name }) => {
   return template(mailString)({ title, name });

src/lambda/modules/mail-template.mjml

@@ -1,39 +1,40 @@
 <mjml>
   <mj-head>
-    <mj-title><%= title %></mj-title>
+    <mj-title>
+      <%= title %>
+    </mj-title>
 
     <mj-attributes>
-      <mj-class name="body-text" font-family="Open Sans, Arial, sans-serif" color="#111111" font-size="16px" line-height="26px" align="center">
-      </mj-class>
+      <mj-class name="body-text" font-family="Open Sans, Arial, sans-serif" color="#111111" font-size="16px" line-height="26px" align="center"></mj-class>
     </mj-attributes>
 
-    <mj-font name="Open Sans" href="http://fonts.googleapis.com/css?family=Open+Sans">
-    </mj-font>
+    <mj-font name="Open Sans" href="http://fonts.googleapis.com/css?family=Open+Sans"></mj-font>
   </mj-head>
 
   <mj-body background-color="#ffffff" padding="0px">
-    <mj-section background-color="#f0f0f0">
+    <mj-section background-color="#fbdde2">
       <mj-column>
-        <mj-text mj-class="body-text" font-size="20px">Hello, <%= name %>!</mj-text>
+        <mj-text mj-class="body-text" font-size="20px">Hello,
+          <%= name %>!</mj-text>
         <mj-text align="left" mj-class="body-text">
           I hope you like my imaginary smoothie shop website. You can go back to the
-          <a href="https://medium.com/@maciejmatu">article</a> if you'd like. Don't worry, you didn't actually order 500,000 smoothies.
-          If you would like to contact me, feel free to reach out on
+          <a href="https://medium.com/@maciejmatu">article</a> if you'd like. Don't worry, you didn't actually order 500,000 smoothies. If you would like to contact me, feel free to reach out on
           <a target="_blank" rel="noopener" href="https://www.linkedin.com/in/maciej-matuszewski-5087a975/">linked.in</a>,
           <a target="_blank" rel="noopener" href="http://github.com/maciejmatu">github</a>&#xA0;or send me a message at
           <a href="mailto:[email protected]">[email protected]</a>
         </mj-text>
       </mj-column>
     </mj-section>
 
-    <mj-section padding-top="0">
+    <mj-section background-color="#f0f0f0">
       <mj-column>
         <mj-social font-size="12px" icon-size="30px" mode="horizontal">
-          <mj-social-element border-radius="4px" name="twitter" href="https://mjml.io/"></mj-social-element>
+          <mj-social-element border-radius="4px" name="twitter" href="https://twitter.com/maciej_matu"></mj-social-element>
 
-          <mj-social-element border-radius="4px"  name="linkedin" href="https://www.linkedin.com/in/maciej-matuszewski-5087a975/"></mj-social-element>
+          <mj-social-element border-radius="4px" name="linkedin" href="https://www.linkedin.com/in/maciej-matuszewski-5087a975/"></mj-social-element>
         </mj-social>
       </mj-column>
     </mj-section>
+
   </mj-body>
 </mjml>

webpack.lambda.js

@@ -1,7 +1,16 @@
+const mjml2html = require('mjml');
+
 module.exports = {
   module: {
     rules: [
-      { test: /\.mjml$/, loader: 'mjml-loader' }
+      {
+        test: /\.mjml$/,
+        loader: function(content) {
+          const result = mjml2html(content);
+
+          return `module.exports = ${JSON.stringify(result.html)};`;
+        }
+      }
     ]
   }
 }