Use react-dom/server.edge instead of .browser in Next.js runtime (#…

…66954)
vercel · Jun 19, 2024 · 318e345 · 318e345
1 parent b548fc7
commit 318e345
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/.github/actions/next-stats-action/native/.gitignore b/.github/actions/next-stats-action/native/.gitignore
@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore
diff --git a/.github/actions/next-stats-action/src/prepare/repo-setup.js b/.github/actions/next-stats-action/src/prepare/repo-setup.js
@@ -65,7 +65,11 @@ module.exports = (actionInfo) => {
      * @param {{ repoDir: string, nextSwcVersion: null | string }} options Required options
      * @returns {Promise<Map<string, string>>} List packages key is the package name, value is the path to the packed tar file.'
      */
-    async linkPackages({ repoDir, nextSwcVersion, parentSpan }) {
+    async linkPackages({
+      repoDir,
+      nextSwcVersion: nextSwcVersionSpecified,
+      parentSpan,
+    }) {
       if (!parentSpan) {
         // Not all callers provide a parent span
         parentSpan = mockSpan()
@@ -118,6 +122,11 @@ module.exports = (actionInfo) => {
         }
       })
 
+      const nextSwcVersion =
+        nextSwcVersionSpecified ??
+        pkgDatas.get('@next/swc')?.packedPackageTarPath ??
+        null
+
       await parentSpan
         .traceChild('write-packagejson')
         .traceAsyncFn(async () => {
@@ -171,9 +180,11 @@ module.exports = (actionInfo) => {
               })
               if (nextSwcVersion) {
                 Object.assign(packageJson.dependencies, {
+                  // CI
                   '@next/swc-linux-x64-gnu': nextSwcVersion,
+                  // Vercel issued laptops
+                  '@next/swc-darwin-arm64': nextSwcVersion,
                 })
-              } else {
               }
             }
 

diff --git a/packages/next/src/server/render.tsx b/packages/next/src/server/render.tsx
@@ -41,7 +41,7 @@ import type { Revalidate, SwrDelta } from './lib/revalidate'
 import type { COMPILER_NAMES } from '../shared/lib/constants'
 
 import React, { type JSX } from 'react'
-import ReactDOMServer from 'react-dom/server.browser'
+import ReactDOMServerEdge from 'react-dom/server.edge'
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {
   GSP_NO_RETURNED_VALUE,
@@ -128,7 +128,7 @@ function noRouter() {
 }
 
 async function renderToString(element: React.ReactElement) {
-  const renderStream = await ReactDOMServer.renderToReadableStream(element)
+  const renderStream = await ReactDOMServerEdge.renderToReadableStream(element)
   await renderStream.allReady
   return streamToString(renderStream)
 }
@@ -1320,7 +1320,7 @@ export async function renderToHTMLImpl(
     ) => {
       const content = renderContent(EnhancedApp, EnhancedComponent)
       return await renderToInitialFizzStream({
-        ReactDOMServer,
+        ReactDOMServer: ReactDOMServerEdge,
         element: content,
       })
     }

diff --git a/test/.stats-app/package.json b/test/.stats-app/package.json
@@ -3,7 +3,7 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "next": "19.0.0-rc-6230622a1a-20240610",
+    "next": "latest",
     "react": "19.0.0-rc-6230622a1a-20240610",
     "react-dom": "19.0.0-rc-6230622a1a-20240610"
   },