feat(preview-server): Proper error handling for prettier's invalid HTML error

[gabrielmfern]

This PR introduces a custom JSX runtime that we use for rendering all emails that allow for tying HTML elements back into the React source file and line. It does that so that it can add the line into the start of the stack trace of the React code that actually ends up rendering as invalid HTML pointed out by prettier:

t6 {
  span: h {
    start: t2 { file: [De], offset: 8029, line: 0, col: 8029 },
    end: t2 { file: [De], offset: 8033, line: 0, col: 8033 },
    fullStart: t2 { file: [De], offset: 8029, line: 0, col: 8029 },
    details: null
  },
  msg: 'Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that
-have-implied-end-tags',
  level: 1,
  elementName: 'p'
}

The way we get the attribute from the prettier error, though, can fail because we try to find the closest attribute to the offset given by prettier in the html. So, this means it might actually point to the next node instead of the correct one, but only the next one. Not sure if we can circumvent this without having to actually parse the HTML ourselves through some sort of lenient parser.

The JSX runtime has only the dev variant and is just a very thin wrapper around the one from react/jsx-dev-runtime that we bundle in with esbuild to get the user's version of it and not the preview server's. This change can also benefit other places like the different checkers

It also improves the error overlay's UI quite a lot, along with customizing how the parsing error message gets rendered. So, the end result is

[changeset-bot]

🦋 Changeset detected

Latest commit: ca8032d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@react-email/preview-server	Patch
react-email	Patch

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-email	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 28, 2025 2:59pm
react-email-demo	❌ Failed (Inspect)			May 28, 2025 2:59pm

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/preview-server@2265

npm i https://pkg.pr.new/resend/react-email@2265

commit: ca8032d