From 47554da1cd47ae68a622a26a568958a773c5596f Mon Sep 17 00:00:00 2001
From: eps1lon <sebastian.silbermann@vercel.com>
Date: Mon, 17 Jun 2024 12:27:43 +0200
Subject: [PATCH] Use react-dom/server.edge instead of .browser in Edge Runtime

---
 packages/next/src/build/create-compiler-aliases.ts   | 12 ++++++++++++
 packages/next/src/server/render.tsx                  |  1 +
 .../server/stream-utils/node-web-streams-helper.ts   |  6 +++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/build/create-compiler-aliases.ts b/packages/next/src/build/create-compiler-aliases.ts
index 6c065b78748497..05b30c02d65756 100644
--- a/packages/next/src/build/create-compiler-aliases.ts
+++ b/packages/next/src/build/create-compiler-aliases.ts
@@ -118,6 +118,12 @@ export function createWebpackAliases({
         }
       : undefined),
 
+    'react-dom/server.browser$': isEdgeServer
+      ? // This is masking userspace errors where .browser is imported in the Edge runtime
+        // But we're also making that mistake so maybe it's good to fix for everybody?
+        'react-dom/server.edge'
+      : 'react-dom/server.browser',
+
     'styled-jsx/style$': defaultOverrides['styled-jsx/style'],
     'styled-jsx$': defaultOverrides['styled-jsx'],
 
@@ -292,6 +298,9 @@ export function createRSCAliases(
         'react/compiler-runtime$': `next/dist/server/route-modules/app-page/vendored/${layer}/react-compiler-runtime`,
         react$: `next/dist/server/route-modules/app-page/vendored/${layer}/react`,
         'react-dom$': `next/dist/server/route-modules/app-page/vendored/${layer}/react-dom`,
+        // FIXME(NEXT-3539): react-dom/server should be aliased to react-dom/server.react-server
+        // optimizations to ignore the legacy build of react-dom/server in `server.browser` build
+        // 'react-dom/server$': `next/dist/compiled/react-dom${bundledReactChannel}/server.react-server.js`,
         'react-server-dom-webpack/server.edge$': `next/dist/server/route-modules/app-page/vendored/${layer}/react-server-dom-webpack-server-edge`,
         'react-server-dom-webpack/server.node$': `next/dist/server/route-modules/app-page/vendored/${layer}/react-server-dom-webpack-server-node`,
       })
@@ -312,6 +321,9 @@ export function createRSCAliases(
         'next/dist/compiled/react/jsx-dev-runtime$': `next/dist/compiled/react${bundledReactChannel}/jsx-dev-runtime.react-server`,
         'next/dist/compiled/react-experimental/jsx-dev-runtime$': `next/dist/compiled/react-experimental/jsx-dev-runtime.react-server`,
         'react-dom$': `next/dist/compiled/react-dom${bundledReactChannel}/react-dom.react-server`,
+        // FIXME(NEXT-3539): react-dom/server should be aliased to react-dom/server.react-server
+        // optimizations to ignore the legacy build of react-dom/server in `server.browser` build
+        // 'react-dom/server$': `next/dist/compiled/react-dom${bundledReactChannel}/server.react-server.js`,
         'next/dist/compiled/react-dom$': `next/dist/compiled/react-dom${bundledReactChannel}/react-dom.react-server`,
         'next/dist/compiled/react-dom-experimental$': `next/dist/compiled/react-dom-experimental/react-dom.react-server`,
       })
diff --git a/packages/next/src/server/render.tsx b/packages/next/src/server/render.tsx
index 1631b677641156..737f78936eeca9 100644
--- a/packages/next/src/server/render.tsx
+++ b/packages/next/src/server/render.tsx
@@ -41,6 +41,7 @@ import type { Revalidate, SwrDelta } from './lib/revalidate'
 import type { COMPILER_NAMES } from '../shared/lib/constants'
 
 import React, { type JSX } from 'react'
+// This is actually aliased to `react-dom/server.edge` in Edge Runtime
 import ReactDOMServer from 'react-dom/server.browser'
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {
diff --git a/packages/next/src/server/stream-utils/node-web-streams-helper.ts b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
index 8b051257c58686..e8094e65236b77 100644
--- a/packages/next/src/server/stream-utils/node-web-streams-helper.ts
+++ b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
@@ -188,7 +188,11 @@ export function renderToInitialFizzStream({
   element,
   streamOptions,
 }: {
-  ReactDOMServer: typeof import('react-dom/server.edge')
+  ReactDOMServer: Pick<
+    // TODO: Should be a union with  typeof import('react-dom/server.browser') but .browser is not typed at all.
+    typeof import('react-dom/server.edge'),
+    'renderToReadableStream'
+  >
   element: React.ReactElement
   streamOptions?: any
 }): Promise<ReactReadableStream> {