RomainGueffier
commented
9 months ago 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
VaniaPopovic
gabrielmfern
johnnycfg
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. Withreact-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