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

[MattSteedman]

I've struggling for a almost a day trying to figure out why i am getting this issue, tried updating serializeHtml to the latest version. Still getting the same issue.
I commented out serializeHtml and just console.log the function on change, did not experience the issue.

here is a look at my set-up:

`'use client';

import { Editor } from '@/packages/editor/plate-ui/editor';
import { FixedToolbar } from '@/packages/editor/plate-ui/fixed-toolbar';
import { FixedToolbarButtons } from '@/packages/editor/plate-ui/fixed-toolbar-buttons';
import { FloatingToolbar } from '@/packages/editor/plate-ui/floating-toolbar';
import { FloatingToolbarButtons } from '@/packages/editor/plate-ui/floating-toolbar-buttons';
import { HeadingElement } from '@/packages/editor/plate-ui/heading-element';
import { ListElement } from '@/packages/editor/plate-ui/list-element';
import { ParagraphElement } from '@/packages/editor/plate-ui/paragraph-element';
import { TableCellElement, TableCellHeaderElement } from '@/packages/editor/plate-ui/table-cell-element';
import { TableElement } from '@/packages/editor/plate-ui/table-element';
import { TableRowElement } from '@/packages/editor/plate-ui/table-row-element';
import { withProps } from '@udecode/cn';
import { MARK_BOLD, MARK_ITALIC, createBoldPlugin, createItalicPlugin } from '@udecode/plate-basic-marks';
import { Plate, PlateEditor, PlateElement, PlateLeaf, createPlateEditor, createPlugins, deserializeHtml } from '@udecode/plate-common';
import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, createHeadingPlugin } from '@udecode/plate-heading';
import { ELEMENT_LI, ELEMENT_OL, ELEMENT_UL, createListPlugin } from '@udecode/plate-list';
import { ELEMENT_PARAGRAPH, createParagraphPlugin } from '@udecode/plate-paragraph';
import { serializeHtml } from '@udecode/plate-serializer-html';
import { ELEMENT_TABLE, ELEMENT_TD, ELEMENT_TH, ELEMENT_TR, createTablePlugin } from '@udecode/plate-table';
import { useMemo, useRef } from 'react';
import { useDebouncedCallback } from 'use-debounce';

const plugins = createPlugins(
[
createParagraphPlugin(),
createHeadingPlugin(),
createListPlugin(),
createTablePlugin(),
createBoldPlugin(),
createItalicPlugin(),
// createAutoformatPlugin({
// options: {
// rules: [
// // Usage: https://platejs.org/docs/autoformat
// ],
// enableUndoOnDelete: true,
// },
// }),
// createDndPlugin({
// options: { enableScroller: true },
// }),
// createExitBreakPlugin({
// options: {
// rules: [
// {
// hotkey: 'mod+enter',
// },
// {
// hotkey: 'mod+shift+enter',
// before: true,
// },
// {
// hotkey: 'enter',
// query: {
// start: true,
// end: true,
// // allow: KEYS_HEADING,
// },
// relative: true,
// level: 1,
// },
// ],
// },
// }),
// createNodeIdPlugin(),
// createResetNodePlugin({
// options: {
// rules: [
// // Usage: https://platejs.org/docs/reset-node
// ],
// },
// }),
// createSelectOnBackspacePlugin({
// options: {
// query: {
// allow: [
// // ELEMENT_IMAGE, ELEMENT_HR
// ],
// },
// },
// }),
// createDeletePlugin(),
// createSoftBreakPlugin({
// options: {
// rules: [
// { hotkey: 'shift+enter' },
// {
// hotkey: 'enter',
// query: {
// allow: [
// // ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD
// ],
// },
// },
// ],
// },
// }),
// createTabbablePlugin(),
// createTrailingBlockPlugin({
// options: { type: ELEMENT_PARAGRAPH },
// }),
],
{
components: {
[ELEMENT_H1]: withProps(HeadingElement, { variant: 'h1' }),
[ELEMENT_H2]: withProps(HeadingElement, { variant: 'h2' }),
[ELEMENT_H3]: withProps(HeadingElement, { variant: 'h3' }),
[ELEMENT_H4]: withProps(HeadingElement, { variant: 'h4' }),
[ELEMENT_H5]: withProps(HeadingElement, { variant: 'h5' }),
[ELEMENT_H6]: withProps(HeadingElement, { variant: 'h6' }),
[ELEMENT_UL]: withProps(ListElement, { variant: 'ul' }),
[ELEMENT_OL]: withProps(ListElement, { variant: 'ol' }),
[ELEMENT_LI]: withProps(PlateElement, { as: 'li' }),
[ELEMENT_PARAGRAPH]: ParagraphElement,
[ELEMENT_TABLE]: TableElement,
[ELEMENT_TR]: TableRowElement,
[ELEMENT_TD]: TableCellElement,
[ELEMENT_TH]: TableCellHeaderElement,
[MARK_BOLD]: withProps(PlateLeaf, { as: 'strong' }),
[MARK_ITALIC]: withProps(PlateLeaf, { as: 'em' }),
},
},
);

type Props = {
htmlValue: string;
onChanged: (content: string) => void;
};

export function PlateEditor({ htmlValue, onChanged }: Props) {
const editorRef = useRef(null);

const initialValue = useMemo(() => {
const tmpEditor = createPlateEditor({ plugins });

return deserializeHtml(tmpEditor, { element: htmlValue });

}, [htmlValue]);

const debouncedCallback = useDebouncedCallback((newValue) => {
console.log('new value :', newValue)
const html = serializeHtml(editorRef.current!, {
nodes: newValue,
});

console.log('html serialized :', html)

/**
 * This is necessary to transform <div class="slate-p"> to <p> since the default serialization does not allow for that
 */
const replacedString = html.toString().replace(/<div class="slate-p">([\s\S]*?)<\/div>/g, '<p>$1</p>');

onChanged(replacedString);

}, 1000);

return (
<Plate
editorRef={editorRef}
plugins={plugins}
initialValue={initialValue as any}
onChange={(newValue) => debouncedCallback(newValue)}
>

  <Editor className='bg-blue-50' />

  <FloatingToolbar>
    <FloatingToolbarButtons />
  </FloatingToolbar>
</Plate>

);
}

`

[zbeyens]

Does it happen in <31.4.4?

[MattSteedman]

I'll give that a try

[MattSteedman]

I get this error when i run the update:

`npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @packages/[email protected]
npm ERR! Found: @udecode/[email protected]
npm ERR! node_modules/@udecode/plate-common
npm ERR! @udecode/plate-common@"^24.5.2" from @packages/[email protected]
npm ERR! src/packages/editor
npm ERR! @packages/[email protected]
npm ERR! node_modules/@packages/editor
npm ERR! workspace src\packages\editor from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @udecode/plate-common@">=31.3.2" from @udecode/[email protected]
npm ERR! node_modules/@udecode/plate-serializer-html
npm ERR! @udecode/plate-serializer-html@"^31.4.4" from @packages/[email protected]
npm ERR! src/packages/editor
npm ERR! @packages/[email protected]
npm ERR! node_modules/@packages/editor
npm ERR! workspace src\packages\editor from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\bitcube\AppData\Local\npm-cache_logs\2024-05-08T13_11_37_010Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\bitcube\AppData\Local\npm-cache_logs\2024-05-08T13_11_37_010Z-debug-0.log`

[dimaanj]

Which version of ReactJS you are using?
Here is related issues @zbeyens for your information
vercel/next.js#58305 (comment)
vercel/next.js#57669

[dimaanj]

It's seems like the fact we have used renderToStaticMarkup from react-server/dom causes the issue. Since folks from React marked that methods as limited, Next.js team decide to throw an error for such methods. They suggest to use the following imports if being used inside Next.js >=14

next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.development in dev
next/dist/compiled/react-dom/cjs/react-dom-server-legacy.browser.production in prod

Options I see

• make additional checks if we are currently in Next.js env and use imports above
• leverage renderToReadableStream like that (will case async nature of serializeHtml)
  renderToStaticMarkup is not allowed in Next.js 14 vercel/next.js#57669 (comment)
• maybe dynamic import also might help

I would suggest to make use of renderToReadableStream

[zbeyens]

We are deprecating @udecode/plate-html. The serializeHtml function has been migrated to @udecode/plate-core and @udecode/plate-common. The migration process for this stable fix requires creating a static version of all your components, that will make it work SSR.

You can find a detailed guide here. And the complete example including export to HTML, Tailwind CSS, and Prism.