Heading not showing on localhost when wrapped with Tailwind component

devklepacki commented 4 weeks ago

Describe the Bug

Heading component is not rendering when it's inside a Tailwind component. I was building a new email and was fighting with Heading not displaying (not rendering in DOM at all). Once I've removed the Tailwind component wrapping my template the Heading appeared. The same happens with newly created project using yarn create email.

There is no Join Enigma on Vercel heading visible right under the logo

Screenshot 2024-04-20 at 11 29 00

While it's in the React code:

Screenshot 2024-04-20 at 11 28 49

It's also not in the rendered HTML code snippet:

<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px">
  <tbody>
    <tr>
      <td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="display:block;outline:none;border:none;text-decoration:none;margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto" width="40" /></td>
    </tr>
  </tbody>
</table>
<p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)">Hello <!-- -->alanturing<!-- -->,</p>
<p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration:none;text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p>

Once the Tailwind component is removed, the Heading appears

Screenshot 2024-04-20 at 11 30 56

Which package is affected (leave empty if unsure)

@react-email/heading, @react-email/tailwind

Link to the code that reproduces this issue

https://github.com/devklepacki/react-email-reproduction

To Reproduce

Download the project (from reproduction or with yarn create email, install dependencies and run it
On localhost go to vercel-invite-user email template
There is no Join Enigma on Vercel Heading visible right under the logo

Expected Behavior

Heading contents should be shown when used inside Tailwind component

What's your node version? (if relevant)

v20.11.0

fominv commented 4 weeks ago

Have the same issue. Downgrading to "@react-email/components": "0.0.15" fixed it for me.

peperoli commented 3 weeks ago

Have the same issue. Downgrading to "@react-email/components": "0.0.15" fixed it for me.

Same here, but had the issue with "@react-email/components": "0.0.15" too. On 0.0.14 it's working for me though.

gabrielmfern commented 3 weeks ago

This should be fixed under the latest canaries, for both @react-email/components and @react-email/tailwind. No need to downgrade here.

See https://github.com/resend/react-email/issues/1391#issuecomment-2035304838.

There were also a few other issues created after that original #1391 was closed, and even though I closed them as not planned, others kept popping up, so I'm going to keep this one open for anyone else to find. Even though this is still a duplicate, thank you, @devklepacki, for making it detailed and making a reproduction regardless of it already being fixed, people like you make open-source fun!

devklepacki commented 3 weeks ago

@gabrielmfern I've got no idea how I didn't find that older issue! Oh, maybe the default search filter was set to open issues... Meh. Anyway, confirmed that the canary version seems to be working. Thank you!

poeck commented 2 weeks ago

For me @react-email/tailwind@0.0.16-canary.1 worked, but @react-email/tailwind@0.0.16 didn't.

gabrielmfern commented 2 weeks ago

@poeck Yeah, I had to compromise there since we needed a new stable release urgently to fix the issues with peer dependencies, so the changes from canary weren't published. I should tune these versions out properly in the coming weeks. Probably making a new latest release with those.

If I'm still unsure of the stability of the changes in canary, I might make another canary release like 0.0.17-canary.x with the new peer dependencies.

mfts commented 5 days ago

I'm on @react-email/components@0.0.17 and react-email@2.1.2 and the <Heading> is completely missing from development and production emails.

Not sure how long this has been going on but it's super weird.

I'm changing <Heading> to <Text> and it will show. That's my short term fix.

gabrielmfern commented 5 days ago

@mfts After #1459 I will release the canaries again and that should be cleared up for now. Will close the issue and let you all know once this is released under a stable version.

Also, see my comment above to understand why it seems like there was a regression from canary to latest.

gabrielmfern commented 4 days ago

Released a new canary for @react-email/tailwind that should be working with this. It is also on the latest canary for @react-email/components.

andresgutgon commented 13 hours ago

Can confirm. I was having exactly this issue and these versions fix it

  "dependencies": {
    "react": "^18.2.0",
    "@react-email/components": "0.0.18-canary.0",
    "@react-email/tailwind": "0.0.17-canary.0",
    "react-email": "2.1.3-canary.2"
  },

resend / react-email