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 Media Queries throw async / Promise React rendering error #1757

Closed
cojo opened this issue Nov 4, 2024 · 1 comment
Closed

Tailwind Media Queries throw async / Promise React rendering error #1757

cojo opened this issue Nov 4, 2024 · 1 comment
Assignees
@gabrielmfern
Labels
Package: @react-email/tailwind Type: Bug Confirmed bug

Comments

@cojo
Copy link

cojo commented Nov 4, 2024

Describe the Bug

Using the new release, e.g.:

"devDependencies": {
		"react-email": "3.0.2"
	},
	"dependencies": {
		"@react-email/components": "0.0.26",
		"react": "18.2.0",
		"react-dom": "18.2.0"
	},

Using any media query (either pre-defined in tailwind.config.ts or dynamically defined inline) triggers an error:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

I believe, but am not 100% certain, that this is because https://github.com/resend/react-email/blob/canary/packages/tailwind/src/tailwind.tsx#L68 passes an async callback. This seems unnecessary, as I don't see any awaits? But I might be missing something.
I notice mapReactTree alludes to a future need for this; in any case I believe this is causing the mapping to return promises that are never awaited and thus break the react render.

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

N/A (see below)

To Reproduce

Something like the following triggers the issue:

export const WelcomeEmail = () => {
	return (
		<Html>
			<Tailwind config={tailwindConfig}>
				<Head />
				<Preview>Welcome to Linus!</Preview>
				<Body className="bg-white my-auto mx-auto font-sans desktop:px-[64px]">

Where desktop: can also be e.g. inlined as min-[600px]: and still reproduce the issue.

Note I do not believe a tailwindConfig is required to reproduce. This is just pulled from our use case.

Expected Behavior

I would expect Tailwind to still work with media queries as expected without breaking the render tree.

What's your node version? (if relevant)

No response
@cojo cojo added the Type: Bug Confirmed bug label Nov 4, 2024
@gabrielmfern gabrielmfern self-assigned this Nov 4, 2024
@gabrielmfern gabrielmfern mentioned this issue Nov 4, 2024
Merged
@gabrielmfern
Copy link
Collaborator

Just fixed it under @react-email/[email protected]/@react-email/[email protected]. Thank you so much for reporting the issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gabrielmfern gabrielmfern

Labels
Package: @react-email/tailwind Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cojo @gabrielmfern