Not allowing import react-dom/server in route.ts

[haishanh]

Link to the code that reproduces this issue

https://github.com/haishanh/nextjs-react-dom-render-reprod

To Reproduce

1. Clone the reproduction repo
2. npm i
3. npm run dev
4. Visit http://localhost:3000/foo to see the error both in the terminal and also the browser

Current vs. Expected behavior

I expect no error on importing "react-dom/server" in route.ts. In my route.ts GET method, I'd like to render html string templated using React. It maybe not a very common use case, given we are using Next.js, but should be a legit one.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Nov 14 18:19:02 PST 2024; root:xnu-11215.41.3~13/RELEASE_ARM64_T8132
  Available memory (MB): 24576
  Available CPU cores: 10
Binaries:
  Node: 20.18.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 10.4.0
Relevant Packages:
  next: 15.1.7 // Latest available version is detected (15.1.7).
  eslint-config-next: 15.1.7
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

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

Module Resolution

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

next dev (local), next build (local)

Additional context

What shows in my terminal:

 ⨯ ./src/app/foo/render.ts:2:1
Ecmascript file had an error
  1 | import * as React from "react";
> 2 | import * as ReactDomServer from "react-dom/server";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3 |
  4 | export function render() {
  5 |   return ReactDomServer.renderToStaticMarkup(

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/app/building-your-application/rendering

And in the browser:

[samcx]

@haishanh Can you clarify why you are using a Route Handler for this instead of just using a regular component?

[haishanh]

@samcx I want to have an API (GET endpoint) which return content that includes rendered html, and I'd like to use JSX+React to render the html.

[samcx]

@haishanh It isn't clear as to why you can't, for example, conditionally render a component (it's not clear still why this needs to be done with an API).

[haishanh]

@samcx As a Nextjs user, I want to provide an API to other services (not this Nextjs app itself). That API response contains html, which I prefer to be templated with JSX+React. That API may not necessarily produce a whole "text/html" string, it could produce "content-type/json" but with some fields that are html string values.

[jonathanhefner]

Another use case: I have some content using React components that can be statically rendered (i.e. no use client). I want to render the content to HTML and do post-processing on that HTML, such as removing or replacing HTML tags.

Also, it should be noted that react-dom/server is an official, documented React API. I don't think Next.js should be prohibiting its usage.

[khaxel]

@samcx I can suggest two use cases from my own experience:

The website has a separate API that requires email templates to match the current design of the site built with Next.js. For example, product cards used in newsletters. To support this, it’s necessary to serve simple HTML via a route.ts, which the external API can then consume — but this functionality is currently missing.

I wanted to create a setup using Next.js and htmx. The idea is to build two separate containers from a single codebase. The first would contain static files generated with output: 'export'. The second would run in API mode and serve the required HTML through route.ts.

[gghdev]

I want to convert a component to an HTML string inside a route handler so that I can pass it to a PDF generator. This would seem like the cleanest and most logical way of doing but this limitation prevents this approach. I'm not sure why.

I guess the hacky workaround would be to create a normal route to just produce the HTML I need, and then fetch it. That's two requests instead of one, though.

Advice welcome.

Edit: a solution is detailed on this ticket. Be wary though as this could be a rabbit hole. Take a look at React's prerenderToNodeStream instead of renderToString if you have async components.