serializeHTML Internal Error: Do not use legacy react-dom/server APIs

[kieranm]

Hi all,

I'm getting this error when calling serializeHtml in a Next.JS 14 app. I was wondering if anyone else had ran into this before, or has any advice?

Thanks
Kieran

[12joan]

Someone posted about this error on the Discord a few weeks ago.

Here's what I said at the time:

This error comes from an import alias Next.js seems to be applying.
https://github.com/vercel/next.js/blob/ec8ee596d00449bfd7bcc9103c0b56fbf3d4f568/packages/next/src/build/noop-react-dom-server-legacy.ts#L2
https://github.com/vercel/next.js/blob/ec8ee596d00449bfd7bcc9103c0b56fbf3d4f568/packages/next/webpack.config.js#L48

I suggest you follow this up with the Next.js team like the error suggests. Next.js shouldn't be interfering with third-party tools like Plate. Feel free to mention me (@12joan) if the Next.js team requires further information about how Plate is using React's server rendering APIs.

[kieranm]

@12joan What do you make of this discussion? The Next team seem to be suggesting people move away from this approach (maybe beause the react APIs have been deprecated? not sure) and there are suggestions for a migration

vercel/next.js#58533

Feels like it could be a bit of an uphill battle to get them to allow these APIs again in Next 14

[12joan]

The asynchronous solutions provided in that thread aren't a good solution for Plate, since serializeHtml should be synchronous.

This example from React's docs might work, however:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"

Source: https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code

[12joan]

I'm not sure why the Next.js team thinks gatekeeping access to React APIs is acceptable. Patching Next.js using Yarn 2 or patch-package to remove the artificial limitation may be the best short-term solution. That's something that consumers will need to do on their end, but we can add a note to Plate's docs explaining how.

[kieranm]

Thanks, I will try to get in contact with people I know at Vercel to get more context on this.

[kieranm]

This PR has now been merged which should resolve the issue I think
vercel/next.js#59737

[kieranm]

Can confirm this is resolved in Canary Next