Skip to content

Commit 186948c

Browse files
committed
Fall back to react-dom/server.browser in Pages router when React 18 is installed
React 18 has no `react-dom/server.edge`
1 parent 5b94793 commit 186948c

File tree

3 files changed

+24
-4
lines changed

3 files changed

+24
-4
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from 'react-dom/server.edge'
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
let ReactDOMServer
2+
3+
try {
4+
ReactDOMServer = require('react-dom/server.edge')
5+
} catch (error) {
6+
if (
7+
// TODO: copilot suggestion. Does this code actually exist?
8+
error.code !== 'MODULE_NOT_FOUND' &&
9+
// TODO: actually encountered that
10+
error.code !== 'ERR_PACKAGE_PATH_NOT_EXPORTED'
11+
) {
12+
throw error
13+
}
14+
// TODO: Ensure App Router does not bundle this
15+
// In React versions without react-dom/server.edge, the browser build works in Node.js.
16+
// The Node.js build does not support renderToReadableStream.
17+
ReactDOMServer = require('react-dom/server.browser')
18+
}
19+
20+
module.exports = ReactDOMServer

packages/next/src/server/render.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ import type { Revalidate, SwrDelta } from './lib/revalidate'
4040
import type { COMPILER_NAMES } from '../shared/lib/constants'
4141

4242
import React, { type JSX } from 'react'
43-
import ReactDOMServerBrowser from 'react-dom/server.browser'
43+
import ReactDOMServerPages from './ReactDOMServerPages'
4444
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
4545
import {
4646
GSP_NO_RETURNED_VALUE,
@@ -127,8 +127,7 @@ function noRouter() {
127127
}
128128

129129
async function renderToString(element: React.ReactElement) {
130-
const renderStream =
131-
await ReactDOMServerBrowser.renderToReadableStream(element)
130+
const renderStream = await ReactDOMServerPages.renderToReadableStream(element)
132131
await renderStream.allReady
133132
return streamToString(renderStream)
134133
}
@@ -1327,7 +1326,7 @@ export async function renderToHTMLImpl(
13271326
) => {
13281327
const content = renderContent(EnhancedApp, EnhancedComponent)
13291328
return await renderToInitialFizzStream({
1330-
ReactDOMServer: ReactDOMServerBrowser,
1329+
ReactDOMServer: ReactDOMServerPages,
13311330
element: content,
13321331
})
13331332
}

0 commit comments

Comments
 (0)