'SendGrid Dynamic Templates + Firebase Functions (Node.js) not erroring, but not sending an email

I am trying to use the dynamic template feature with SendGrid with my Firebase Functions (Node.js), but my mail is not sending for some reason. I get a few errors thrown, but they shouldn't be preventing the email from sending.

When I save the SG template on the web app, I get a pop-up notification saying: Your template has been successfully saved, but we've detected an issue with your handlebars code that requires attention. I have messed around with fixing this and can't find anything to make the "handlebars issue" go away.

On the firebase functions console, I get the below logs:

Any ideas why I am not getting the email in my inbox? Everything was working fine when I was just passing an HTML snippet directly to the send() method.

Node.js snippet:

const heading = "New Website Contact Message!";
const body =
`
    <div>
        <h3>Message Details:</h3>
        <p><b>Name</b>: ${newValues.name}</p>
        <p><b>Email</b>: ${newValues.email}</p>
        <p>
            <b>Message</b>:
            <br/>
            ${newValues.body}
        </p>
        <hr/>
        <p>
            You can reply directly to this email to continue the email thread with the user who sent the message.
        </p>
    </div>
`;

// Pack It
const msg = {
    to: sensitiveSiteData.messengers,
    from: `${publicSiteData.name} <${publicSiteData.emails.noreply}>`,
    replyTo: `${newValues.email}`,
    cc: "",
    bcc: [],
    // Create this template on SendGrid: https://mc.sendgrid.com/dynamic-templates
    template_id: "d-3ce711231142141241241241241",
    dynamic_template_data: {
        "subject": "New " + publicSiteData.name + " Contact Message",
        "siteName": publicSiteData.name,
        "logoUrl": publicSiteData.logo.url,
        "logoWidth": publicSiteData.logo.width,
        "heading": heading,
        "body": body,
        "colors": publicSiteData.theme.schemes.light.colors,
        "emails": publicSiteData.emails,
        "ppUrl": publicSiteData.projectId + ".web.app/privacy-policy",
        "termsUrl": publicSiteData.projectId + ".web.app/terms",
    },
    text: `${newValues.name} <${newValues.email}>: ${newValues.body}`,
};

// Send it
allPromises.push(
    sgMail.send(msg).then(() => {
            console.log("Email sent");
        }).catch((error: any) => {
            console.error(error);
        })
);

SendGrid HTML template:

<html>
    <head>
      <title>{{{ insert heading 'default=Fire React Base Email' }}}</title>
    </head>
    <body>
       <div style="width: 100%; font-family: Arial, Helvetica, sans-serif;">
            <div style="text-align: center;">
                    <img 
                        alt="{{{ insert siteName 'default=Fire React Base' }}} logo"
                        src="{{{ insert logoUrl 'default=https://firebasestorage.googleapis.com/v0/b/test-fire-react-base.appspot.com/o/public%2Flogos%2Flogo192.png?alt=media' }}}"
                        width="{{{ insert logoWidth 'default=150' }}}px" 
                        height="auto"
                    />
            </div>
            <h1 style="margin: 20px 0 0 0; text-align: center; color: {{{ insert colors.primary 'default=black' }}} !important;">
                {{{ insert siteName 'default=Fire React Base' }}}
            </h1>
            <div style="margin: auto; width: 80%; padding: 1%;">
                <h2>{{{ insert heading 'default=Heading Here' }}}</h2>
                <div style="border: solid {{{ insert colors.primary 'default=black' }}} 2px; padding: 5%;">
                    {{{
                    insert body 
                    
                    '
                    default=Tempor officia officia commodo labore do ut qui laboris occaecat nulla esse excepteur. Officia est exercitation ex laborum qui. Nostrud magna excepteur qui incididunt velit eiusmod consequat laborum ea laborum aliquip ut. Id ut fugiat elit adipisicing cillum nulla veniam anim nisi ea velit. Mollit dolore proident minim reprehenderit officia fugiat. Ea ea occaecat dolor est ipsum cupidatat tempor eu dolor amet. In deserunt elit in commodo tempor consectetur id excepteur mollit ea aliquip. Adipisicing incididunt commodo officia amet velit ea deserunt deserunt enim ipsum reprehenderit Lorem elit. Lorem ex pariatur elit ut anim excepteur nostrud nostrud dolore nulla. Ad ex mollit proident enim quis eu ipsum cupidatat irure non quis. Labore veniam consequat pariatur sunt eu quis qui occaecat aute sunt et dolor est ullamco. Sunt Lorem adipisicing id elit.
                    '
                    }}}
                </div>
               
                <div style="text-align: center; margin: 25px 0; font-size: 14px;">
                    <p>
                        Questions? Contact
                        <a href="mailto:{{{ insert emails.support '[email protected]' }}}">{{{ insert emails.support '[email protected]' }}}</a>
                    </p>
                    <p>
                        <a href="{{{ insert ppUrl 'default=fire-react-base.web.app/privacy-policy' }}}">Privacy Policy</a>
                        &nbsp;&nbsp;
                        <a href="{{{ insert termsUrl 'default=fire-react-base.web.app/terms' }}}">Terms &amp; Conditions</a>
                    </p>
                    <p><a href="https://company.com">Powered by Company</a></p>
                </div>
            </div>
        </div>
    </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'SendGrid Dynamic Templates + Firebase Functions (Node.js) not erroring, but not sending an email

Sources

Related Questions