Next.js doesn't let me use renderToString from react-dom/server.

[tobico]

Summary

A strategy I've used to great success before under Express was to use renderToString from react to generate the HTML for emails to be sent out using React.

When trying to do this under Next.js, it gives me an error for the import with this text:

You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

It seems like they have special-cased an error for this import to stop people from accidentally doing something incorrect with server components, but in this case I'm not working with server components at all and I really do need to use renderToString and not something else.

Any ideas how I could suppress this error message and gain access to the react-dom/server library which I already know works perfectly fine?

Additional information

No response

Example

No response

[tobico]

After significant investigation I've found a viable workaround.

Firstly, there doesn't seem to be any way around this restriction as it's implemented both in a Webpack plugin (which can be disabled) and in Next.js's Rust-based React Server Components transformer (which can't be disabled).

Using a require statement instead of import worked from within Next.js, but I was no longer able to execute this same code directly from Node.js which in this case I needed to do.

I also tried using Preact as an alternative to render my HTML, but it doesn't appear to be possible to use both React and Preact in the same project.

The solution which did work for me is to asynchronously import the react-dom/server library, as suggested in this discussion.

To be frank this situation is ridiculous and reflects poorly on Next.js as a framework. The bare minimum we should expect from our tools is not to break things which were already working.

[izucken]

I needed this to render some html for microdata and had to use dynamic import hack as well...