Fall back to react-dom/server.browser in Pages router when React 18 is installed

React 18 has no `react-dom/server.edge`

Author: eps1lon

packages/next/src/server/ReactDOMServerPages.d.ts

@@ -0,0 +1 @@
+export * from 'react-dom/server.edge'

packages/next/src/server/ReactDOMServerPages.js

@@ -0,0 +1,20 @@
+let ReactDOMServer
+
+try {
+  ReactDOMServer = require('react-dom/server.edge')
+} catch (error) {
+  if (
+    // TODO: copilot suggestion. Does this code actually exist?
+    error.code !== 'MODULE_NOT_FOUND' &&
+    // TODO: actually encountered that
+    error.code !== 'ERR_PACKAGE_PATH_NOT_EXPORTED'
+  ) {
+    throw error
+  }
+  // TODO: Ensure App Router does not bundle this
+  // In React versions without react-dom/server.edge, the browser build works in Node.js.
+  // The Node.js build does not support renderToReadableStream.
+  ReactDOMServer = require('react-dom/server.browser')
+}
+
+module.exports = ReactDOMServer

packages/next/src/server/render.tsx

@@ -40,7 +40,7 @@ import type { Revalidate, SwrDelta } from './lib/revalidate'
 import type { COMPILER_NAMES } from '../shared/lib/constants'
 
 import React, { type JSX } from 'react'
-import ReactDOMServerBrowser from 'react-dom/server.browser'
+import ReactDOMServerPages from './ReactDOMServerPages'
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {
   GSP_NO_RETURNED_VALUE,
@@ -127,8 +127,7 @@ function noRouter() {
 }
 
 async function renderToString(element: React.ReactElement) {
-  const renderStream =
-    await ReactDOMServerBrowser.renderToReadableStream(element)
+  const renderStream = await ReactDOMServerPages.renderToReadableStream(element)
   await renderStream.allReady
   return streamToString(renderStream)
 }
@@ -1327,7 +1326,7 @@ export async function renderToHTMLImpl(
     ) => {
       const content = renderContent(EnhancedApp, EnhancedComponent)
       return await renderToInitialFizzStream({
-        ReactDOMServer: ReactDOMServerBrowser,
+        ReactDOMServer: ReactDOMServerPages,
         element: content,
       })
     }

test/development/basic/next-rs-api.test.ts

@@ -15,6 +15,8 @@ import {
 import loadConfig from 'next/dist/server/config'
 import path from 'path'
 
+const isReact18 = parseInt(process.env.NEXT_TEST_REACT_VERSION) === 18
+
 function normalizePath(path: string) {
   return path
     .replace(/\[project\].+\/node_modules\//g, '[project]/.../node_modules/')
@@ -41,6 +43,21 @@ function styledStringToMarkdown(styled: StyledString): string {
   }
 }
 
+function isReactDOMServerEdgeConditionalBundlingIssue(issue: {
+  description?: Issue['description']
+  filePath: string
+}) {
+  return (
+    isReact18 &&
+    issue.filePath ===
+      '[project]/.../node_modules/next/dist/esm/server/ReactDOMServerPages.js' &&
+    issue.description?.type === 'text' &&
+    issue.description?.value.includes(
+      'Import map: aliased to module "react-dom" with subpath "/server.edge" inside of [project]/'
+    )
+  )
+}
+
 function normalizeIssues(issues: Issue[]) {
   return issues
     .map((issue) => ({
@@ -53,6 +70,11 @@ function normalizeIssues(issues: Issue[]) {
         source: normalizePath(issue.source.source.ident),
       },
     }))
+    .filter((issue) => {
+      // The conditional bundling is wrapped in a try-catch.
+      // It doesn't surface to the user, so it's safe to ignore here.
+      return !isReactDOMServerEdgeConditionalBundlingIssue(issue)
+    })
     .sort((a, b) => {
       const a_ = JSON.stringify(a)
       const b_ = JSON.stringify(b)
@@ -504,7 +526,7 @@ describe('next.rs api', () => {
             expect(result.done).toBe(false)
             expect(result.value).toHaveProperty('resource', expect.toBeObject())
             expect(result.value).toHaveProperty('type', 'issues')
-            expect(result.value).toHaveProperty('issues', expect.toBeEmpty())
+            expect(normalizeIssues(result.value.issues)).toEqual([])
             expect(result.value).toHaveProperty(
               'diagnostics',
               expect.toBeEmpty()