search

resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
13.96k stars 629 forks source link

Bug when too much text in an email #1588

Closed maxpaleo closed 15 hours ago

maxpaleo commented 1 month ago

Describe the Bug

Hi all,

I usually don't report bugs like this, but I spent 2 hours trying to fix an issue, and I am convinced it's an issue within React email.

For some reason, when an email contains too much text (Preview text + body combined), the email looses some of its styles, images, the layout, etc.

I ran several tests including using different ways of passing in text, tested different number of characters in the email, and all my tests end up with the same result.

This applies to text added anywhere, using any component. (Text or Markdown component).

Below are 2 screenshots, that show the exact same email, but one has more text. You can see that the one with more text, lost styles such as padding, margin as well as the logo image.

Screenshot 2024-08-12 at 9 51 03 PM Screenshot 2024-08-12 at 9 50 58 PM

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

/

To Reproduce

Send an email with each of these strings in a Text component, to reproduce.

Ok text: "We wanted to inform you that your subscription payment is past due. This may have occurred due to an issue with your payment method. To avoid any interruption in your service, please update your payment information as soon as possible.

Exceeding text: "We wanted to inform you that your subscription payment is past due. This may have occurred due to an issue with your payment method. To avoid any interruption in your service, please update your payment information as soon as possible. You can do this by logging into your account. You can do this by logging into your account. You can do this by logging into your account. If you have any questions or need help our support team is here for you."

Expected Behavior

I don't believe it should loose elements when exceeding a certain number of characters.

What's your node version? (if relevant)

v21.4.0

gabrielmfern commented 1 month ago

Where are you viewing this email? Are you sure this is the direct output from React Email that comes truncated somehow?

maxpaleo commented 1 month ago

Hi @gabrielmfern , in my email client "Spark", it does the same in Gmail. I spent 2 hours on this and can confirm that the issue is directly related to the number of characters in the email. Once I remove a certain amount of characters, it will show correctly.

It doesn't actually truncate the email, though; it removes a bunch of other elements instead.

gabrielmfern commented 1 month ago

@maxpaleo Can you share some email template code, so I can try it out and see what gets removed?

I am aware that Gmail does do this kind of thing when the HTML is too large, if that is the case React Email can't really help, you would have to trim down your email template somehow. But it could be that we can avoid it somehow.

gabrielmfern commented 15 hours ago

Closing this as stale, if anyone can share something I can reproduce I will reopen.