render function not working in nextjs 14

[mamlzy]

I'm using next version 14.0.4
render function not working

here is the code:

the error:

is anybody facing the same issue like me?

[gabrielmfern]

Afaik this error is thrown due to nextjs overriding the usual implementation for renderToStaticMarkup. What I think is happening is that renderToStaticMarkup and other sync methods like this one are going to be deprecated and Next is already ready for that.
The way to fix it is to not use the React's sync render method, and use the renderAsync one instead.

I think we will just have renderAsync as render to avoid these issues. The latest version for @react-email/render should have a renderAsync that works in your situation. If you are running on the edge you might have issues with the latest one though and, if I remember correctly, they have already been fixed on the latest canary for @react-email/render.

[mamlzy]

yes i tried using renderAsync it is working fine, but renderAsync only works in RSC right? what i want to do is something like this:

but i want to rerender after some states changes. i did this is for make the "Email Template" updates based on what user typing from inputs.
here is the app:

can you give me the best practice for this? thanks!

[mamlzy]

i try to downgrade nextjs to 13.5.x and the render function working fine. But i think downgrading is not the best solution🙁

[gabrielmfern]

renderAsync should work in other environments too, has it failed somewhere else for you?
The thing is that you are going to have to treat it like you treat fetch calls if you aren't using RSCs. Maybe on a useEffect and setting state to then render.

[gabrielmfern]

You could also directly render the email on your React component if you can't use @react-email/render there

[mamlzy]

You could also directly render the email on your React component if you can't use @react-email/render there

it will show the same error if i directly render the Email Component in the page.tsx, that's why i am coverting the Email Template to html using render and pass it to the srcDoc iframe's props

[gabrielmfern]

how about with something like:

const [markup, setMarkup] = useState<string>();

useEffect(() => {
  (async () => {
    setMarkup(await renderAsync(<Customized customerName={name} />)
  })();
}, [debouncedName]);

---

TLDR: Use this alongside upgrading @react-email/render to canary that improved the renderAsync function and import from it to make sure it uses the proper version.

[mamlzy]

still showing the same erorr in nextjs 14😕, but working fine in next 13.5.x. But @gabrielmfern have you tried this code in next 14? is it works in yours? please, let me know..

the code:

the error:

[gabrielmfern]

Can you try this out on the canary for render (@react-email/render@canary)? Also remember to import from @react-email/render instead of from components.

[mamlzy]

oh wait, after upgrading @react-email/components to canary version, your code is works in nextjs 14! thank you so much, but tell me is it good for performance that await-ing a promise inside useEffect, which is runs for every dependency array changes?

[mamlzy]

is importing from @react-email/render is better instead of @react-email/components?