`@react-email/tailwind` does not work with latest React 19 canary

[ZipBrandon]

Describe the Bug

TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher') due to React 18.2 being compiled into the @react-email/tailwind. React 19 recently removed the access to __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED which exists in the @react-email/tailwind/dist/index.mjs via the react-jsx-runtime.production.min.js code.

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

https://github.com/ZipBrandon/react-email-troubleshoot

To Reproduce

Modify your package.json to include the latest React canary with specified overrides.

"dependencies": {
...
    "react": "19.0.0-canary-96c584661-20240412",
    "react-dom": "19.0.0-canary-96c584661-20240412",
...
},
"overrides": {
    "react": "19.0.0-canary-96c584661-20240412",
    "react-dom": "19.0.0-canary-96c584661-20240412"
  }

Expected Behavior

Not to throw a TypeError

What's your node version? (if relevant)

No response

[gabrielmfern]

What would be the issue with React Email running on a different React version than the one you are using? Just wondering because you added in the override, so that forces React Email into using the React you are using. Or are you specifically experimenting with React canary features with React Email?

[gabrielmfern]

I do think that #1383 would also fix this due to this more specific external config

https://github.com/resend/react-email/blob/41ae84612df024e7312b7d7c07b7e2246d8cb6eb/packages/tailwind/vite.config.ts#L9-L15

[ZipBrandon]

What would be the issue with React Email running on a different React version than the one you are using? Just wondering because you added in the override, so that forces React Email into using the React you are using.

Good thought! I realize I'm on the bleeding edge but wanted to surface this for when 19 is generally available. I override for all other dependencies that may complain about version constraints. My test suite tests functionality against this heavy-handed approach. It has just been a failure to launch with latest React canaries after April 8th.

[gabrielmfern]

@ZipBrandon Just asking due to curiosity, this certainly is a bug, and I'll look into fixing it. We should not be bundling in anything from React. Thank you so much for opening this issue! :)

[ZipBrandon]

@ZipBrandon Just asking due to curiosity, this certainly is a bug, and I'll look into fixing it. We should not be bundling in anything from React. Thank you so much for opening this issue! :)

No worries! I cloned https://github.com/resend/react-email/pull/1383 and substituted that @react-email/tailwind and it works as expected.

[gabrielmfern]

A fix for this was released under @react-email/tailwind@0.0.17-canary.0!

[viczam]

I get this error after the alpha updates: renderToStream is not a function

"@react-email/components": "^0.0.18-canary.0",
"@react-email/render": "^0.0.14-canary.0",
"@react-email/tailwind": "0.0.17-canary.0",
"next": "14.3.0-canary.61",
"react": "^18.3.0",
"react-dom": "^18.3.0",
"react-email": "2.1.3-canary.1"

[gabrielmfern]

@viczam Thanks for letting me know about this! Weirdly enough, we don't call that function at all, can you show the full stack trace? I'll also try making a reproduction of it myself

[gabrielmfern]

@viczam Seems like this is related to resend using the older @react-email/render actually, you can pass in the html option for it in the meantime or, you can also add an override for @react-email/render in your package.json.