Breaking button when forwaring email to MSO

[BrentEerlingenWork]

Describe the Bug

When forwarding an email that includes the component from react.email, Microsoft Outlook (MSO) sometimes displays a broken image symbol instead of rendering the button correctly. The button in the forwarded email is often not clickable as well.

This appears to be related to conditional comments in the underlying HTML (<!--[if mso]>) which may get altered or partially stripped during the forward action.

The issue does not occur in regular (non-forwarded) views and seems isolated to forwarded messages viewed in Outlook.

Which package is affected (leave empty if unsure)

@react-email/button

Link to the code that reproduces this issue

NA

To Reproduce

1.	Send the email to an Outlook client.
2.	Open the email in Outlook and use the “Forward” feature.
3.	Check the forwarded message preview or sent message in Outlook.

⸻

Expected Behavior

The button should retain its formatting and not display a broken image or icon. Conditional comments and padding should work as expected across forward actions in Microsoft Outlook.

What's your node version? (if relevant)

No response

[devvaansh]

Hi, I would like to work on this issue,
My approach will be to investigate the conditional MSO comments in the @react-email/button component, as the issue description suggests they are the likely cause. I plan to explore a more resilient VML or table structure that can withstand Outlook's forwarding behavior, ensuring the button remains visually intact and clickable.

Could you please assign this issue to me?
thank u!

[agentHits]

Hi, I would like to work on this issue, My approach will be to investigate the conditional MSO comments in the @react-email/button component, as the issue description suggests they are the likely cause. I plan to explore a more resilient VML or table structure that can withstand Outlook's forwarding behavior, ensuring the button remains visually intact and clickable.

Could you please assign this issue to me? thank u!

So where did you disappear to? ((( They gave me hope and left.

[abdulimr]

I've noticed that the <Button> component breaks on Outlook for Windows to the extent where anything that follows after it isn't rendered. Switching to the <Link> resolved this instantly. This was the case with direct emails, forwards or replies from the Outlook client on Windows only.

[ThomasSimoens]

Also ran into the issue @abdulimr mentions; a <Button> causes the following content to be stripped.

For testing we used (free version of) https://testi.at/ and the Office 365 on Windows ("Office 365 (2508) Semi-Annual") which had the same exact issue that a customer reported.

As work-around solution we created a new component that uses Vector Markup Language (VML) as the reason seemed be the fact that Word rendering engine is used.

[lenoirzamboni]

Our solution, remove --pretty from export.

We noticed that the button and everything below it were disappearing in Outlook (2016, 2019, 2021, and 365 on Windows). We were building our templates using --pretty, but removing --pretty from the export command fixed the issue. The formatter was breaking the MSO conditional comments in the Button output, causing Outlook to truncate the rest of the email.

[vector-kainzbauer]

Our solution, remove --pretty from export.

We noticed that the button and everything below it were disappearing in Outlook (2016, 2019, 2021, and 365 on Windows). We were building our templates using --pretty, but removing --pretty from the export command fixed the issue. The formatter was breaking the MSO conditional comments in the Button output, causing Outlook to truncate the rest of the email.

We had the exact same problem and the exact same resolution.
In our case only Outlook 365 for Windows in Legacy Mode was affected.

[dielduarte]

Hey folks @vector-kainzbauer @lenoirzamboni, which react-email version are you using? I'm trying to reproduce the issue, but I can't with the latest.