fix(react-email): tighten error when <head> is missing inside <Tailwind>#3471
Open
mvanhorn wants to merge 2 commits intoresend:canaryfrom
Open
fix(react-email): tighten error when <head> is missing inside <Tailwind>#3471mvanhorn wants to merge 2 commits intoresend:canaryfrom
mvanhorn wants to merge 2 commits intoresend:canaryfrom
Conversation
Restructure the missing-<head> error so the actionable instruction is the first line and the offending class list is on its own line. The prior message buried the directive inside three paragraphs of prose, which made it easy for users to miss the real cause (e.g. when <Head /> is placed outside <Tailwind>, as in resend#3026 with dark:* classes). Add a regression test for the failing topology (<Head /> OUTSIDE <Tailwind>, with a Body containing dark:* classes) and convert the two existing throw assertions from snapshot matching to direct .toThrow() checks against the new message text. Closes resend#3026
🦋 Changeset detectedLatest commit: 9996e62 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
@mvanhorn is attempting to deploy a commit to the resend Team on Vercel. A member of the Team first needs to authorize it. |
commit: |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 4 files
Confidence score: 5/5
- This PR looks low risk to merge: the only flagged item is a low-severity documentation/release-note formatting issue (3/10) rather than application runtime behavior.
- The most severe issue is in
.changeset/clear-tailwind-head-error.md, where raw<Head>/<Tailwind>may be parsed as HTML and cause generated changelog text to render incorrectly or be hidden. - Pay close attention to
.changeset/clear-tailwind-head-error.md- escape or code-format the angle-bracket terms so release notes display as intended.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name=".changeset/clear-tailwind-head-error.md">
<violation number="1" location=".changeset/clear-tailwind-head-error.md:5">
P3: Raw `<Head>` / `<Tailwind>` in the changeset summary can be interpreted as HTML in generated changelogs, so the release note may render incorrectly or hide the text.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Raw <Head>/<Tailwind> were being interpreted as HTML in the generated changelog. Backticks render them as inline code instead. Spotted by cubic-dev-ai review on resend#3471.
Contributor
Author
|
Fixed in 9996e62 - backticked |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restructure the missing-
<head>error so the actionable instruction is the first line and the offending class list is on its own line. The prior message buried the directive inside three paragraphs of prose.Why this matters
In #3026, @GeekCornerGH reported that adding
dark:*classes inside<Tailwind>crashes the dev server. The repro template (also confirmed by @opswiz) places<Head />outside<Tailwind>, which is what triggers the throw ontailwind.tsx:159-172. The error explained the cause, but with the directive buried mid-paragraph many users only saw the surroundingELIFECYCLE Command failed with exit code 1.@claygeo posted a thorough investigation pinpointing the throw site - credit for the diagnosis goes to them.
The new message reads:
Changes
packages/react-email/src/components/tailwind/tailwind.tsx- tighten the throw at the missing-<head>sitepackages/react-email/src/components/tailwind/tailwind.spec.tsx- new regression test covering<Head />outside<Tailwind>withdark:*classes; the two existing snapshot-based throw assertions are converted to direct.toThrow()checks against the new message textpackages/react-email/src/components/tailwind/__snapshots__/tailwind.spec.tsx.snap- removed (the file's two entries were consumed by the spec changes above; no remaining snapshot calls in this spec).changeset/clear-tailwind-head-error.md- patch changeset forreact-emailTesting
pnpm testpasses (10/10 tasks, 35/35 tailwind tests).pnpm lintpasses (one pre-existing CSS warning unrelated to this change).Open question
Issue #3026 also asks for the dev server not to exit on render errors. That fix lands at the render call site in the preview app (the previously-cited
render-email-by-path.tsxno longer exists on canary, so identifying the current site is part of the work). Happy to follow up in a separate PR - which call site do you want me to wrap, @gabrielmfern? Or would you prefer this PR stay scoped to just the error message?Fixes #3026
Summary by cubic
Tightened the Tailwind missing
<head>error inreact-emailso the fix is clear and immediate when<Head />is outside<Tailwind>. Addresses the crash scenario reported in #3026 withdark:*classes.<Head />outside<Tailwind>withdark:*classes; replaced snapshots with direct.toThrow()checks and removed the snapshot file.react-emailand backticked<Head>/<Tailwind>in it to fix changelog rendering.Written for commit 9996e62. Summary will update on new commits.