resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
12.57k stars 571 forks source link

fix(react-email): Different react-dom version being used to render email templates #1431

Closed gabrielmfern closed 1 week ago

gabrielmfern commented 3 weeks ago

This fixes the issues that were causing #649. What was causing that issue was that @react-email/render would import react-dom as the Next bundled version, which would not be the same React instance used inside the email templates, this caused that globals such as their dispatcher would not have the expected values.

I noticed this was the cause of that issue after looking at our updated trace on the error, and it pointed down into the bundled version of react-dom inside next. The same issue was also happening for versions prior to 2.0, so this was not a regression either.

To fix this, I added a simple esbuild plugin to when the email template is loaded, so that it adds a export { renderAsync } from '@react-email/render' at the end of it. This way, it would also give us access to the renderAsync and react-dom used in the user's project, so that this mismatch is not there anymore.

Since I was experimenting a bit as well, I added in a test to make sure the getEmailComponent function works properly at least with a local very simple file.

How can I test this?

  1. Run pnpm install and turbo build inside packages/react-email
  2. Add the following email template at apps/demo/emails/test.tsx
    
    import React from "react";

export default function Test() { const containerRef = React.useRef(null);

return

Hello world!
; }


3. Run `npx tsx ../../packages/react-email/src/cli/index.ts dev` inside `apps/demo`
4. Open http://localhost:3000/preview/test and verify the error from #649 does not happen
vercel[bot] commented 3 weeks ago

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 10, 2024 2:48pm
react-email-demo ❌ Failed (Inspect) May 10, 2024 2:48pm