From 12cc42f17987e445732be5e08851ab9c437fa42e 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

---
 .../next-swc/crates/next-core/src/next_import_map.rs   |  6 ++++++
 packages/next/src/build/create-compiler-aliases.ts     | 10 ++++++++++
 packages/next/src/server/render.tsx                    |  1 +
 .../src/server/stream-utils/node-web-streams-helper.ts |  6 +++++-
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/next-swc/crates/next-core/src/next_import_map.rs b/packages/next-swc/crates/next-core/src/next_import_map.rs
index 5044ccee27b11..95f716220eb3e 100644
--- a/packages/next-swc/crates/next-core/src/next_import_map.rs
+++ b/packages/next-swc/crates/next-core/src/next_import_map.rs
@@ -370,6 +370,12 @@ pub async fn get_next_edge_import_map(
 ) -> Result<Vc<ImportMap>> {
     let mut import_map = ImportMap::empty();
 
+    // https://github.com/vercel/next.js/blob/e1c0f63520d7fc39ce0eab60333d311c90610414/packages/next/src/build/create-compiler-aliases.ts#L121-L125
+    import_map.insert_exact_alias(
+        "react-dom/server.browser",
+        request_to_import_mapping(project_path, "react-dom/server.edge"),
+    );
+
     // https://github.com/vercel/next.js/blob/786ef25e529e1fb2dda398aebd02ccbc8d0fb673/packages/next/src/build/webpack-config.ts#L815-L861
 
     // Alias next/dist imports to next/dist/esm assets
diff --git a/packages/next/src/build/create-compiler-aliases.ts b/packages/next/src/build/create-compiler-aliases.ts
index 6c065b7874849..0c6c4b2e4205f 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,8 @@ 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
+        // '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 +320,8 @@ 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
+        // '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 1631b67764115..737f78936eeca 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 8b051257c5868..e8094e65236b7 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> {