renderToStaticMarkup is not allowed in Next.js 14

[hughlv]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/busy-bohr-xyz6rn?file=%2Fapp%2Fpage.tsx%3A15%2C1

To Reproduce

The issue is quite straightforward.

In certain case I need to generate static HTML code with renderToStaticMarkup, which works fine even in the last canary build of Nextjs 13.5.7-canary.14, but in v14 I will receive following errors.

This is a simplified verison of code so please don't bother why not return the div code direclty.

"use client";

import { renderToStaticMarkup } from "react-dom/server";
export default function Home() {
  const buildTip = (value: any) =>
    renderToStaticMarkup(
      <div className="w-96 h-80 overflow-y-auto mx-0 text-sm text-base-content p-2">
        {String(value)}
      </div>,
    );

  return <div>{buildTip("hello")}</div>;
}

Error info:

Internal Error: do not use legacy react-dom/server APIs. If you encountered this error, please open an issue on the Next.js repo.

I did a research on both GitHub and Vercel website but did not find a clue of the solution. In React, this funciton is not marked as deprecated.

Please advice what to do with this problem. Thanks.

Current vs. Expected behavior

I expected to use renderToStaticMarkup normally.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Tue Sep 26 22:11:17 PDT 2023; root:xnu-10002.40.89.501.1~3/RELEASE_ARM64_T8103
Binaries:
  Node: 19.9.0
  npm: 9.6.3
  Yarn: 1.22.18
  pnpm: 8.9.0
Relevant Packages:
  next: 14.0.0
  eslint-config-next: 14.0.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

No response

[hughlv]

I think I've figured out the solution. renderToStaticMarkup has been replaced by renderToPipeableStream in React 18.

Following code should work:

export function renderToStaticMarkup(element: any) {
  return new Promise((resolve, reject) => {
    let html = '';
    const writableStream = new Writable({
      write(chunk: any, encoding: any, callback: any) {
        html += chunk;
        callback();
      },
    });

    writableStream.on('finish', () => {
      resolve(html);
    });

    writableStream.on('error', reject);

    renderToPipeableStream(element).pipe(writableStream);
  });
}

[poorscousertommy8]

I think I've figured out the solution. renderToStaticMarkup has been replaced by renderToPipeableStream in React 18.

Following code should work:

export function renderToStaticMarkup(element: any) {
  return new Promise((resolve, reject) => {
    let html = '';
    const writableStream = new Writable({
      write(chunk: any, encoding: any, callback: any) {
        html += chunk;
        callback();
      },
    });

    writableStream.on('finish', () => {
      resolve(html);
    });

    writableStream.on('error', reject);

    renderToPipeableStream(element).pipe(writableStream);
  });
}

Can you please publish a codesandbox example, I still can't get it to work (even with your renderToPipeableStream code).

Thanks.

[BorysShulyak]

@hughlv Could you provide the sandbox with the solution, please ?

[kindunq]

Can you let me know if this issue has been resolved?
I had the same situation and couldn't solve it with that code.
So I downgraded

please answer..

thank you

[mattiaz9]

I'm using renderToString on the client and now I get this error.

Am I screwed in Next 14?

[opeologist]

i don't think the solution posted is a solution at all, really. it's suggesting to make a local version of the API that internally uses another API, and that doesn't feel like the right way to go about this. can this be re-opened and someone explain the reason for this error, when it doesn't look from react's documentation that the API's legacy/deprecated at all? ref

[BorysShulyak]

Hey! @opeologist @mattiaz9 @kindunq @poorscousertommy8 and others, let's continue searching the help in this discussion - [Next.js 14 / React 18] How to migrate from renderToStaticMarkup method on the Client side?

Could you tap the top arrow emoji on this discussion, please?

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.