Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unexpected validation error for custom email message using ReactDOMServer.renderToStaticMarkup

See original GitHub issue

Describe the bug When I try to create a custom message using ReactDOMServer.renderToStaticMarkup, I get a validation error. However if I pass the value and regex into a regex tool, I get a match.

Error below: 1 validation error detected: Value '<html><body><div style="padding:20"><h4>Hi, there!</h4><p>Thank you for signing up to xxx. Here is the confirmation code {####} to complete your registration.</p><p> </p><p>--</p><p>Happy days,</p><p>CompanyName</p></div></body></html>' at 'emailBody' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}\s*]*\{####\}[\p{L}\p{M}\p{S}\p{N}\p{P}\s*]*

To Reproduce I have a lambda that handles the CustomMessageTriggerEvent events. It sets the event.response.emailSubject and event.response.emailMessage. The problem is with the emailMessage field.

See code snippet below.

Expected behavior It should just work.

Code Snippet

event.response.emailMessage = getCustomEmailMessage(triggerSource, event.request.codeParameter);

calls:

const getCustomEmailMessage = (triggerSource: string, codeParameter: string): string => {
    if (triggerSource === 'CustomMessage_SignUp') {
        return getHtmlMessage(
            `Thank you for signing up to CompanyName. Here is the confirmation code ${codeParameter} to complete your registration.`
        );
    } else {
       //do something else
}
};

const getHtmlMessage = (textToInject: string): string => {
const reactComponent = renderEmailMessage(textToInject)
 return "<html><body>" + reactComponent + "</body></html>"
//I have also tried using return`<html><body>${reactComponent}</body></html>`
};

The renderEmailMessage is in EmailMessage.tsx. The entire file is below:

import ReactDOMServer from "react-dom/server";

interface EmailMessageProps {
    code: string;
}
 const EmailMessage: React.FC<EmailMessageProps> = ({code}: EmailMessageProps) => (
    <div style={{padding: "20"}}><h4>Hi, there!</h4><p>{code}</p><p>&nbsp;</p><p>--</p><p>Happy hacking,</p><p>CompanyName</p></div>
  );

export const renderEmailMessage = (code: string) => {
    return ReactDOMServer.renderToStaticMarkup(<EmailMessage code={code} />)
}

If instead of using react and I simply have the below in getHtmlMessage, it works:

const getHtmlMessage = (textToInject: string): string => {
    return `<html>
                <body>
                    <div style="padding: 20;">
                        <h4>Hi, there!</h4><p>${textToInject}</p><p>&nbsp;</p><p>--</p><p>Happy hacking,</p><p>CompanyName</p>
                    </div>
                </body>
            </html>`;
};

Issue Analytics

State:
Created 3 years ago
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

igorkostacommented, May 5, 2021

@amhinson why has this issue been closed without providing the link to the AWS Cognito support issue. I’m experiencing the same issue although I created the function for custom message with amplify

0reactions

github-actions[bot]commented, May 6, 2022

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

Top Results From Across the Web

React email validation error not displaying - Stack Overflow

I share my code in code-sandbox. This is my input form import React, { useState } from "react"; import ...

ReactDOMServer – React

The following methods can be used in the environments that don't support streams: renderToString(); renderToStaticMarkup(). Reference. renderToPipeableStream().

Functional Web Development with React and Redux

line breaks, spaces, and variable names in an email template. ... Custom validation in React is implemented with a function. This function should....

Beginning ReactJS Foundations Building User Interfaces with ...

CHAPTER 13 Error Boundaries . ... Preface Custom Attributes in DOM Elements with data- ... React components to static HTML, you can use...

Two Surprising Tricks for Creating a PDF from a React ... - Oribi

print() function to open the default browser printing prompt, which provides a “print to pdf” option. It is also possible to customize the...