Render emails in Next JS client component throws at renderToStaticMarkup #1080
Comments
|
here is a hook sending email in my real app: import { useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { useCustomer, useSendEmail } from '@org/hooks'
import { type ValidationSchema, validationSchema } from './validation'
// lib containing react-email components
import { emailContactTemplate, type ContactEmailProps } from '@org/emails'
const useContactForm = () => {
const {
register,
reset,
handleSubmit,
formState: { errors },
} = useForm<ValidationSchema>({
resolver: zodResolver(validationSchema),
})
const { sendEmail, isLoading } = useSendEmail()
const { customer } = useCustomer()
const onSubmit: SubmitHandler<ValidationSchema> = async ({
firstname,
lastname,
...rest
}) => {
const name = `${firstname} ${lastname}`
const emailData = {
customer: customer,
data: {
name,
...rest,
},
previewText: 'Demande de renseignements depuis votre site internet',
} satisfies ContactEmailProps
// fetch wrapper hook to send content with external api
const result = await sendEmail({
to: customer.email,
subject: 'Demande de renseignements depuis votre site internet',
text: emailContactTemplate.toText(emailData), // wrapper for @react-email/render
html: emailContactTemplate.toHtml(emailData), // wrapper for @react-email/render
})
reset()
}
return {
onSubmit,
register,
handleSubmit,
errors,
isLoading,
}
}
export default useContactForm |
|
From what I've gathered of this issue what's happening is that Next stubs the |
|
@RomainGueffier What happens if you use renderAsync for this instead? |
Didn't think about it, it just works 😱. If so, it is a life saver alternative as this bug is show-stopper for us. I did push in reproduction repo an updated test with
I put 6 use cases including server and client with both render and renderAsync Edit: it does not work for both case in safari |
Seems like using a polyfill can fix it in safari for now: https://github.com/MattiasBuelens/web-streams-polyfill |
That's really helpful, we'll probably use something like that for the |
How did you use polyfill in your project to fix it? |
I use next js layout.tsx file to import polyfill directly: import Script from 'next/script'
type RootLayoutProps = {
children: React.ReactNode
}
export default function RootLayout({
children
}: RootLayoutProps) {
return (
<html>
<body>
{/*...code...*/}
{/* distant cdn */}
<Script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.js" />
{/* OR local file */}
<Script src="/js/polyfill.js" />
</body>
</html>
)
} |
|
This has been fixed ever since |
|
For reference ReadableByteStreamController isn't supported in Safari, so stilling getting |
|
Still getting |
Describe the Bug
I have a bug since upgrating to Next JS
14.xwith@react-email/renderon client side.I already saw similar issues but none of them really address my use case scenario.
I have monorepo project with an @email package full of
react-emailcomponents exported as react. I need to render them at runtime to pass dynamic props.With
react-hook-formonSubmitI send as POST body to my mailer api the stringified html of my emails templates rendered on the spot. I will share later usage example, but see simple reproducing repo.Since next 14 I have this error:
Maybe it was not intended for
renderto be used in the client bundle, but until now it was working fine. Advice on my usage is welcome.Note: I can't revert to next 13 as there is serious issues with ISR cache.
Thanks for your awesome work to make email templating world easier 👍🏼
Which package is affected (leave empty if unsure)
@react-email/render
Link to the code that reproduces this issue
https://github.com/RomainGueffier/react-email-next-14
To Reproduce
Install and run project
In home page, visit server page => will work
In home page, visit client page => click
show/hide templatesee console error shows error, crashExpected Behavior
Be able to render emails as string in client side
What's your node version? (if relevant)
20
The text was updated successfully, but these errors were encountered: