Skip to content

Commit

Permalink
Fallback to react-dom/server.browser in Pages router if Edge versio…
Browse files Browse the repository at this point in the history
…n is not available

`react-dom/server.edge` is not available in React 18.
We were using `.browser` before when we were on React 18 so this should be safe.
  • Loading branch information
eps1lon committed Aug 30, 2024
1 parent c2b493b commit cb6bccd
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 1 deletion.
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from 'react-dom/server.edge'
18 changes: 18 additions & 0 deletions packages/next/src/build/shims/ReactDOMServerEdgeIfAvailable.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
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
}
// TOOD: Ensure App Router does not bundle this
ReactDOMServer = require('react-dom/server.browser')
}

module.exports = ReactDOMServer
2 changes: 1 addition & 1 deletion packages/next/src/server/render.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 ReactDOMServerEdge from 'react-dom/server.edge'
import ReactDOMServerEdge from '../build/shims/ReactDOMServerEdgeIfAvailable'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
import {
GSP_NO_RETURNED_VALUE,
Expand Down
23 changes: 23 additions & 0 deletions packages/next/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ const webpack = require('webpack')
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { writeFileSync } = require('fs')
const { StatsWriterPlugin } = require('webpack-stats-plugin')

const pagesExternals = [
'react',
Expand All @@ -13,6 +15,7 @@ const pagesExternals = [
'react-dom/package.json',
'react-dom/client',
'react-dom/server',
'react-dom/server.browser',
'react-dom/server.edge',
'react-server-dom-webpack/client',
'react-server-dom-webpack/client.edge',
Expand Down Expand Up @@ -219,6 +222,26 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
}
: {}),
}),

new StatsWriterPlugin({
stats: 'verbose',
transform(data) {
const json = JSON.stringify(data, null, 2)

writeFileSync(
path.join(
process.env.HOME,
'stats/next-bundle',
`stats.${bundleType}${
turbo ? `.turbo` : '.webpack'
}.${dev ? 'dev' : 'prod'}.bad.json`
),
json
)

return json
},
}),
].filter(Boolean),
stats: {
optimizationBailout: true,
Expand Down

0 comments on commit cb6bccd

Please sign in to comment.