Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haishanh opened this issue Feb 17, 2025 · 0 comments
Open

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

haishanh opened this issue Feb 17, 2025 · 0 comments
Labels
Module Resolution Module resolution (CJS / ESM, module resolving).

Comments

@haishanh
Copy link

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:

Image

@github-actions github-actions bot added the Module Resolution Module resolution (CJS / ESM, module resolving). label Feb 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Module Resolution Module resolution (CJS / ESM, module resolving).
Projects
None yet
Development

No branches or pull requests

1 participant