Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<Preview> causes emails to appear completely empty in Gmail when certain values are passed #1785

Open
Stefanyshyn opened this issue Nov 21, 2024 · 8 comments
Open

<Preview> causes emails to appear completely empty in Gmail when certain values are passed #1785

Stefanyshyn opened this issue Nov 21, 2024 · 8 comments
Labels
Package: @react-email/preview Resolution: Needs Investigation This issue needs more investigation Type: Bug Confirmed bug

Comments

@Stefanyshyn
Copy link

Describe the Bug

When using the <Preview> component with text values from an array (e.g., problemTitles), the email appears completely empty in Gmail. However, if a simple text string such as "Bug report" is passed, the email renders correctly.

Screenshots:
Empty Email - This shows the empty email issue.

Correct Email - This shows the correct rendering when a simple string is passed.

Which package is affected (leave empty if unsure)

@react-email/preview

Link to the code that reproduces this issue

none

To Reproduce

  1. Create the following email component: 
    import { Body, Head, Html, Preview, Tailwind } from '@react-email/components';

const problemTitles = ['Sie wurden zum Zugriff auf einen Datenraum eingeladen', 'Sie wurden eingeladen, auf einen Datenraum zuzugreifen'];

const Email = ({ title }: { title: string }) => (
  <Html>
    <Head />
    <Preview>{title}</Preview>
    <Tailwind>
      <Body>Hello World</Body>
    </Tailwind>
  </Html>
);
  2. Pass one of the problemTitles values (e.g., problemTitles[0]) as the title prop to <Email >.
  3. Generate the email and send it to Gmail.
  4. Open the email in Gmail.

Expected Behavior

The email should render correctly with the text passed to the <Preview> component displayed in the preview line, and the body content ("Hello World") should also appear.

However, when using problemTitles[0] or problemTitles[1], the email is completely empty in Gmail.

What's your node version? (if relevant)

22
@Stefanyshyn Stefanyshyn added the Type: Bug Confirmed bug label Nov 21, 2024
@gabrielmfern
Copy link
Collaborator

I also saw some other users mentioning that this was happening when the preview text has 53 characters or above, seems like this is the same exact case as yours

I still can't quite understand why this happens, I'll have to investigate

@gabrielmfern
Copy link
Collaborator

I seem to not be able to reproduce for some reason. What version of all packages are you using?

@awaisspk
Copy link

Having similar issue. For me, it happens when the text string has more then 57 chars.

const previewText = "Welcome to Brief News. Get ready for a smarter news feed..."
  <Preview>
      {previewText}
  </Preview>

Packages version:
"react-email": "3.0.2",
"@react-email/button": "0.0.18",
"@react-email/components": "0.0.26",
"@react-email/html": "0.0.10",
"@react-email/render": "1.0.2",
"@react-email/tailwind": "1.0.0",

@mjyoung
Copy link

mjyoung commented Dec 5, 2024

Can confirm this happens in a fresh install of react-email-starter. The stripe-welcome email does not properly load because of the long <Preview>. Removing it entirely or shortening the contents fixes the issue.

Steps to reproduce:

pnpm create email
cd react-email-starter
pnpm install
pnpm dev
# Navigate to http://localhost:3001/preview/stripe-welcome?view=desktop
{
  "dependencies": {
    "@react-email/components": "0.0.29",
    "react-dom": "18.3.1",
    "react": "18.3.1"
  },
  "devDependencies": {
    "@types/react": "18.3.4",
    "@types/react-dom": "18.3.0",
    "react-email": "3.0.3"
  }
}

@mjyoung
Copy link

mjyoung commented Dec 5, 2024 •
edited
Loading

Super weird...

So the default Preview text DOES NOT render the email:

<Preview>You're now ready to make live transactions with Stripe!</Preview>

But this DOES render:

<Preview>You're now ready to make live TRANSACTIONS! with Stripe!</Preview>

And this DOES render:

<Preview>
      You're now ready to make live TRANSACTIONS TRANSACTIONS TRANSACTIONS with Stripe!
</Preview>

But this DOES NOT render:

<Preview>You're now ready to make live TRANSACTIONS with Stripe!</Preview>

So it doesn't appear to be based on character count.

@gabrielmfern
Copy link
Collaborator

For some reason, the problem also seems to go away when using React 19 instead of 18.

@gabrielmfern
Copy link
Collaborator

The error seems to be caused by prettier, as looking at the HTML before it runs, it doesn't have any missing content.

@gabrielmfern
Copy link
Collaborator

Ok, I think I figured it out, mostly. I've long known that React 18 has a weird tendency to insert null-byte characters in some places of the HTML, and it seems like they come exactly inside the rendered part of the Preview. The issue is that Prettier seems to just give up on parsing the AST when it finds these null-byte characters.

As a workaround for now, I'm going to change it so that all null-byte characters are removed before prettifying.

gabrielmfern added a commit that referenced this issue Dec 26, 2024
@gabrielmfern
fix problem causing #1785
24e1c2e
gabrielmfern added a commit that referenced this issue Dec 26, 2024
@gabrielmfern
fix problem causing #1785
52ad7d3
@gabrielmfern gabrielmfern mentioned this issue Dec 26, 2024
Open
gabrielmfern added a commit that referenced this issue Dec 27, 2024
@gabrielmfern
fix problem causing #1785
6803791
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: @react-email/preview Resolution: Needs Investigation This issue needs more investigation Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mjyoung @Stefanyshyn @awaisspk @gabrielmfern