Use react-dom/server.edge instead of .browser in Edge Runtime

vercel · Jun 17, 2024 · dd926ba · dd926ba
1 parent f085c7a
commit dd926ba
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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> {