Closed SharadKumar closed 4 years ago
Hi Team After few hrs of effort, I am giving up on this cause I can't figure! :)
Please help if you know why I am not able to work with Layout custom component. These are simple functions being used in nextjs (server side node).
My template:
import React from 'react' import { Mjml, MjmlRaw, MjmlColumn, MjmlSection, MjmlText } from 'mjml-react' import Layout from './components/layout' function Template({ name }) { return ( <Mjml> <MjmlSection> <MjmlColumn> <MjmlText align="center"> Header in template, doesn't render </MjmlText> </MjmlColumn> </MjmlSection> <MjmlRaw>Raw in template, doesn't render either</MjmlRaw> <Layout> <MjmlSection> <MjmlColumn> <MjmlText align="center"> This header inside layout, does render! </MjmlText> </MjmlColumn> </MjmlSection> <MjmlRaw>This raw inside layout also does render</MjmlRaw> <MjmlSection> <MjmlColumn> <MjmlText align="center">Hi {name} Welcome to our app! Yes of course this renders too</MjmlText> </MjmlColumn> </MjmlSection> </Layout> </Mjml> ) } Template.getSubject = async () => { return 'Welcome to our app...' } Template.getTo = async ({ name, email }) => { return `${name} <${email}>` } export default Template
Layout is below... notice while props.children does render, the other components in Layout do not render!
props.children
import React from 'react' import { MjmlBody, MjmlSection, MjmlColumn, MjmlText, MjmlRaw, } from 'mjml-react' function Layout(props) { return ( <> <MjmlSection> <MjmlColumn> <MjmlText align="center">Header inside layout</MjmlText> </MjmlColumn> </MjmlSection> <MjmlRaw>Raw heading</MjmlRaw> <MjmlBody>{props.children}</MjmlBody> <MjmlSection> <MjmlColumn> <MjmlText align="center">Footer</MjmlText> </MjmlColumn> </MjmlSection> </> ) } export default Layout
Files:
├── account-signed-up.jsx └── components └── layout.jsx
Rendered mail:
... Content-Type: multipart/alternative; From: XXX Subject: Welcome to our app... ... MIME-Version: 1.0 ----_NmP-e2eee9c3714fbb70-Part_1 Content-Type: text/plain; charset=us-ascii Content-Transfer-Encoding: 7bit Header inside layout, on template Raw heading, on template, inside layoutHi McGrath Welcome to my app! ----_NmP-e2eee9c3714fbb70-Part_1 Content-Type: text/html; charset=us-ascii Content-Transfer-Encoding: quoted-printable <!doctype html><html xmlns=3D"http://www.w3.org/1999/xhtml" xmlns:v=3D"urn:= schemas-microsoft-com:vml" xmlns:o=3D"urn:schemas-microsoft-com:office:offi= ce"><head> <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dus-ascii"= ><title></title><!--[if !mso]><!-- --><meta http-equiv=3D"X-UA-Compatible" = content=3D"IE=3Dedge"><!--<![endif]--><meta name=3D"viewport" content=3D"wi= dth=3Ddevice-width,initial-scale=3D1"><style type=3D"text/css">#outlook a {= padding:0; } body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-= size-adjust:100%; } table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-tab= le-rspace:0pt; } img { border:0;height:auto;line-height:100%; outline:none;text-de= coration:none;-ms-interpolation-mode:bicubic; } p { display:block;margin:13px 0; }</style><!--[if mso]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--><!--[if lte mso 11]> <style type=3D"text/css"> .mj-outlook-group-fix { width:100% !important; } </style> <![endif]--><!--[if !mso]><!--><link href=3D"https://fonts.googleap= is.com/css?family=3DUbuntu:300,400,500,700" rel=3D"stylesheet" type=3D"text= /css"><style type=3D"text/css">@import url(https://fonts.googleapis.com/css= ?family=3DUbuntu:300,400,500,700);</style><!--<![endif]--><style type=3D"te= xt/css">@media only screen and (min-width:480px) { .mj-column-per-100 { width:100% !important; max-width: 100%; } }</style><style type=3D"text/css"></style></head><body><div><!--[if m= so | IE]><table align=3D"center" border=3D"0" cellpadding=3D"0" cellspacing= =3D"0" class=3D"" style=3D"width:600px;" width=3D"600" ><tr><td style=3D"li= ne-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div= style=3D"margin:0px auto;max-width:600px;"><table align=3D"center" border= =3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=3D"w= idth:100%;"><tbody><tr><td style=3D"direction:ltr;font-size:0px;padding:20p= x 0;text-align:center;"><!--[if mso | IE]><table role=3D"presentation" bord= er=3D"0" cellpadding=3D"0" cellspacing=3D"0"><tr><td class=3D"" style=3D"ve= rtical-align:top;width:600px;" ><![endif]--><div class=3D"mj-column-per-100= mj-outlook-group-fix" style=3D"font-size:0px;text-align:left;direction:ltr= ;display:inline-block;vertical-align:top;width:100%;"><table border=3D"0" c= ellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=3D"vertical-= align:top;" width=3D"100%"><tr><td align=3D"center" style=3D"font-size:0px;= padding:10px 25px;word-break:break-word;"><div style=3D"font-family:Ubuntu,= Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:cente= r;color:#000000;">Header inside layout, on template</div></td></tr></table>= </div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></t= able></div><!--[if mso | IE]></td></tr></table><![endif]--> Raw heading, on= template, inside layout<!--[if mso | IE]><table align=3D"center" border=3D= "0" cellpadding=3D"0" cellspacing=3D"0" class=3D"" style=3D"width:600px;" w= idth=3D"600" ><tr><td style=3D"line-height:0px;font-size:0px;mso-line-heigh= t-rule:exactly;"><![endif]--><div style=3D"margin:0px auto;max-width:600px;= "><table align=3D"center" border=3D"0" cellpadding=3D"0" cellspacing=3D"0" = role=3D"presentation" style=3D"width:100%;"><tbody><tr><td style=3D"directi= on:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><= table role=3D"presentation" border=3D"0" cellpadding=3D"0" cellspacing=3D"0= "><tr><td class=3D"" style=3D"vertical-align:top;width:600px;" ><![endif]--= ><div class=3D"mj-column-per-100 mj-outlook-group-fix" style=3D"font-size:0= px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;wi= dth:100%;"><table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"= presentation" style=3D"vertical-align:top;" width=3D"100%"><tr><td align=3D= "center" style=3D"font-size:0px;padding:10px 25px;word-break:break-word;"><= div style=3D"font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13p= x;line-height:1;text-align:center;color:#000000;">Hi McGrath Welcome to my = app!</div></td></tr></table></div><!--[if mso | IE]></td></tr></table><![en= dif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table>= <![endif]--></div><img src=3D"http://url791.auctionomy.app/wf/open?upn=3DeJ= ytQtnrX6oMjWyMcWotS-2BqccebOxrBRzcVgCPCh36uJrShgbeVmy-2B-2F0j0L6zN5OvfP3MKQ= xw23W0OVFSt7chK7RUitzbI5ULmieuZ-2F6WQzaMOIKk7UNFSAAnyrrNlKKRolHUZmeh76Yhe41= gfYG7tlr6HeE4-2B3BTUK11rxIxnkUwb6Y91Ie9FvowbEIyCSRu67PXXoLbwhmSFgX5yYf3vecJ= 5nOWDiceR5HZY-2BXJHw-3D" alt=3D"" width=3D"1" height=3D"1" border=3D"0" sty= le=3D"height:1px !important;width:1px !important;border-width:0 !important;= margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !importan= t;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !impor= tant;padding-right:0 !important;padding-left:0 !important;"></body></html>= ----_NmP-e2eee9c3714fbb70-Part_1--
And before the email is transported, I debug and see the following outcome from the component:
{ html: '<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><!--[if !mso]><!-- --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style type="text/css">#outlook a { padding:0; }\n' + ' body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n' + ' table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n' + ' img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n' + ' p { display:block;margin:13px 0; }</style><!--[if mso]>\n' + ' <xml>\n' + ' <o:OfficeDocumentSettings>\n' + ' <o:AllowPNG/>\n' + ' <o:PixelsPerInch>96</o:PixelsPerInch>\n' + ' </o:OfficeDocumentSettings>\n' + ' </xml>\n' + ' <![endif]--><!--[if lte mso 11]>\n' + ' <style type="text/css">\n' + ' .mj-outlook-group-fix { width:100% !important; }\n' + ' </style>\n' + ' <![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);</style><!--<![endif]--><style type="text/css">@media only screen and (min-width:480px) {\n' + ' .mj-column-per-100 { width:100% !important; max-width: 100%; }\n' + ' }</style><style type="text/css"></style></head><body><div><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">Header inside layout, on template</div></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--> Raw heading, on template, inside layout<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">Hi McGrath Welcome to my app!</div></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></div></body></html>', subject: 'Welcome to our app...', text: 'Header inside layout, on template Raw heading, on template, inside layoutHi\n' + 'McGrath Welcome to my app!', }
Notably, see the text outcome...
text
const { render } = require('mjml-react') const htmlToText = require('html-to-text') ... const { html } = render(Template(props)) // Template is the above template with props passed const text = htmlToText.fromString(html)
Damn... I have to put all components inside MjmlBody... closing now!
Hi Team After few hrs of effort, I am giving up on this cause I can't figure! :)
Please help if you know why I am not able to work with Layout custom component. These are simple functions being used in nextjs (server side node).
My template:
Layout is below... notice while
props.children
does render, the other components in Layout do not render!Files:
Rendered mail:
And before the email is transported, I debug and see the following outcome from the component:
Notably, see the
text
outcome...