vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.72k stars 26.62k forks source link

renderToReadableStream does not work in edge route handlers #66245

Open alvarlagerlof opened 3 months ago

alvarlagerlof commented 3 months ago

Link to the code that reproduces this issue

https://github.com/alvarlagerlof/next-repro-render-to-readable-stream

To Reproduce

  1. Start the repro dev server
  2. Load /
image
 GET / 500 in 15ms
 ⨯ Error [TypeError]: Cannot read properties of undefined (reading 'H')
    at performWork (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:11116:45)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:11535:14)
    at scheduleWork (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:491:3)
    at startWork (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:11534:5)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:11708:5)
    at new Promise (<anonymous>)
    at Module.renderToReadableStream (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:11646:10)
    at renderToString (webpack-internal:///(rsc)/./app/route.ts:14:31)
    at async GET (webpack-internal:///(rsc)/./app/route.ts:9:20)
    at async eval (webpack-internal:///(rsc)/./node_modules/next/dist/esm/server/future/route-modules/app-route/module.js:246:37)

Current vs. Expected behavior

Error [TypeError]: Cannot read properties of undefined (reading 'H') logged instead of returning hello world. I would expect this import to work given that this is a route handler and not a sever component.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:19:22 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8112
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 2.4.3
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-rc.0 // Latest available version is detected (15.0.0-rc.0).
  eslint-config-next: N/A
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Module Resolution, Runtime

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

next dev (local), next build (local), next start (local)

Additional context

No response

alvarlagerlof commented 3 months ago

Some more context:

Since https://github.com/vercel/next.js/pull/64751/files, the react-server condition is applied to route handlers (wasn't before). The canaries after this change work fine until https://github.com/vercel/next.js/pull/65058/files, where it stops working.

This example on Resend.com is built on being able to run renderToRedableStream / renderToPipeableStream in a route handler, and it will break as well.

image
alvarlagerlof commented 2 months ago

Seems a lot like this issue is going to be resolved by https://github.com/facebook/react/pull/30105, but will keep this open until I've been able to confirm that it works.