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

Tailwind doesn't recognize the Head component when NODE_ENV="production" #1112

Closed
laurisbernhart opened this issue Dec 22, 2023 · 10 comments
Closed

Tailwind doesn't recognize the Head component when NODE_ENV="production" #1112

laurisbernhart opened this issue Dec 22, 2023 · 10 comments
Labels
Package: @react-email/tailwind Type: Bug Confirmed bug

Comments

@laurisbernhart
Copy link

laurisbernhart commented Dec 22, 2023 •
edited
Loading

First, thanks for improving the email DX so much with this library🙌

Describe the Bug

When using the Head component as a direct child of Tailwind:

If NODE_ENV is set to production, I receive the following error:

Tailwind: To use responsive styles you must have a element as a direct child of the Tailwind component.

If NODE_ENV is set to development, it will work as expected.

Does not work in production:

<Tailwind config={...} >
      <Head>
        <meta name="color-scheme" content="light dark" />
        <meta name="supported-color-schemes" content="light dark" />
      </Head>
     ...
</Tailwind>

Workaround
Using a normal head tag works when NODE_ENV is set to production.

<Tailwind config={...} >
      <head>
        <meta content="text/html; charset=UTF-8" httpEquiv="Content-Type" />
        <meta name="color-scheme" content="light dark" />
        <meta name="supported-color-schemes" content="light dark" />
      </head>
      ...
</Tailwind>

Without digging deeper and trying it out, my best guess is that this check fails in production

react-email/packages/tailwind/src/tailwind.tsx

Lines 181 to 183 in 778f3b0

(typeof element.type === "function" &&
"name" in element.type &&
element.type.name === "Head")

Best Lauris

What's your node version? (if relevant)

v18.16.0
@laurisbernhart laurisbernhart added the Type: Bug Confirmed bug label Dec 22, 2023
xonx4l added a commit to xonx4l/react-email that referenced this issue Dec 24, 2023
@xonx4l
Update tailwind.tsx
78f47f8 
issue-:resend#1112
@xonx4l xonx4l mentioned this issue Dec 24, 2023
Closed
@gabrielmfern
Copy link
Collaborator

Can you give a reproduction for this issue?

@gabrielmfern
Copy link
Collaborator

Really can't reproduce this issue, could any of you give a minimal reproduction @xonx4l @laurisbernhart?

@gabrielmfern gabrielmfern changed the title Head Component bug – Tailwind: To use responsive styles you must have a <head> element as a direct child of the Tailwind component. Tailwind doesn't recognize the Head component when NODE_ENV="production" Jan 10, 2024
@zegl
Copy link
Contributor

zegl commented Jan 11, 2024 •
edited
Loading

Hi, I have been running into the same issue, and have created a minimal reproduction.

It's a NextJS project, where react-email works in dev-mode (npm run dev), but not in the production build (npm run build).

In dev-mode, you can see that the response renders fine at http://localhost:3000/email-media.

However, when building for production, it fails:

Error occurred prerendering page "/email-media". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Tailwind: To use responsive styles you must have a <head> element as a direct child of the Tailwind component.
    at kF (~/react-email-tailwind/.next/server/chunks/387.js:2409:1881)
    at tY (~/react-email-tailwind/.next/server/chunks/387.js:21:186500)
    at tJ (~/react-email-tailwind/.next/server/chunks/387.js:21:203279)
    at tZ (~/react-email-tailwind/.next/server/chunks/387.js:21:205933)
    at tY (~/react-email-tailwind/.next/server/chunks/387.js:21:197643)
    at tJ (~/react-email-tailwind/.next/server/chunks/387.js:21:203279)
    at tK (~/react-email-tailwind/.next/server/chunks/387.js:21:186055)
    at tY (~/react-email-tailwind/.next/server/chunks/387.js:21:186651)
    at tJ (~/react-email-tailwind/.next/server/chunks/387.js:21:203279)
    at t8 (~/react-email-tailwind/.next/server/chunks/387.js:21:210435)

Using @react-email/tailwind 0.0.13.

The relevant react-email code is here: https://github.com/zegl/react-email-tailwind/blob/main/src/app/email-media/route.tsx

@juliuslipp
Copy link

As a temporary workaround you can downgrade to @react-email/tailwind 0.0.12. Was facing the same issue.

@gabrielmfern gabrielmfern removed the Resolution: Can't Reproduce This issue cannot be reproduced label Jan 15, 2024
@gabrielmfern
Copy link
Collaborator

Thanks @zegl for the repro, I'll look into this right now. The issue is probably because we check for either the head element or a function component with the name Head and since minifcation changes this it causes the issue.

@gabrielmfern
Copy link
Collaborator

@zegl Would you consider checking this plugin out https://www.npmjs.com/package/webpack-react-component-name? I think using it can be a workaround on this for now and it may confirm my suspicion for what is causing the issue here.

@zegl
Copy link
Contributor

zegl commented Jan 22, 2024

@gabrielmfern I tried, but I haven't been able to get it to work with the webpack-react-component-name plugin. But you're probably on the right track, it sounds likely that some magnification would break the names of custom components.

@gabrielmfern gabrielmfern mentioned this issue Jan 30, 2024
Closed
@mucahidyazar
Copy link

mucahidyazar commented Feb 9, 2024 •
edited
Loading

I installed just @react-email/components to my CRA dashboard project and I was facing the same issue and fixed it like below. It is a workaround. But there is still an issue like this. fyi @laurisbernhart @zegl

image

@gabrielmfern
Copy link
Collaborator

A better temporary workaround is to use the element substituting the component for now. If you want the same exact code and behavior as the component gives, you can get its code here:

react-email/packages/head/src/head.tsx

Lines 8 to 11 in bb8cd54

<head {...props}>
<meta content="text/html; charset=UTF-8" httpEquiv="Content-Type" />
{children}
</head>

Haven't fixed this quite yet because of #1124.

This was referenced Mar 11, 2024
Merged
Merged
@gabrielmfern
Copy link
Collaborator

gabrielmfern commented Mar 13, 2024 •
edited
Loading

Fixed and released under @react-email/[email protected]. See the release notes on https://github.com/resend/react-email/releases/tag/%40react-email%2Ftailwind%400.0.15-canary.1. The @react-email/components also has this new version under its latest canary.

If any of you still experience this issue, please let me know and I'll reopen.

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/tailwind Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@zegl @laurisbernhart @juliuslipp @mucahidyazar @gabrielmfern