Fix alias for react-dom/server

vercel · May 23, 2023 · 5781ddb · 5781ddb
1 parent ec8bf53
commit 5781ddb
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 16 deletions.
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -401,7 +401,7 @@ function createReactAliases(
     'react-dom$': `next/dist/compiled/react-dom${bundledReactChannel}`,
     'react/jsx-runtime$': `next/dist/compiled/react${bundledReactChannel}/jsx-runtime`,
     'react/jsx-dev-runtime$': `next/dist/compiled/react${bundledReactChannel}/jsx-dev-runtime`,
-    'react-dom/server$': `next/dist/compiled/react-dom${bundledReactChannel}/server$`,
+    'react-dom/server$': `next/dist/compiled/react-dom${bundledReactChannel}/server`,
     'react-dom/server.edge$': `next/dist/compiled/react-dom${bundledReactChannel}/server.edge`,
     'react-dom/server.browser$': `next/dist/compiled/react-dom${bundledReactChannel}/server.browser`,
     'react-server-dom-webpack/client$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/client`,

diff --git a/test/e2e/app-dir/rsc-basic/app/app-react/client-react.js b/test/e2e/app-dir/rsc-basic/app/app-react/client-react.js
@@ -0,0 +1,17 @@
+'use client'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactDOMServer from 'react-dom/server'
+
+export default function ClientReact() {
+  return (
+    <div>
+      <p id="client-react">{'React.version=' + React.version}</p>
+      <p id="client-react-dom">{'ReactDOM.version=' + ReactDOM.version}</p>
+      <p id="client-react-dom-server">
+        {'ReactDOMServer.version=' + ReactDOMServer.version}
+      </p>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/rsc-basic/app/app-react/page.js b/test/e2e/app-dir/rsc-basic/app/app-react/page.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import ReactDOMServer from 'react-dom/server.browser'
+import ReactDOMServer from 'react-dom/server.edge'
+import ClientReact from './client-react'
 
 export default function Page() {
   return (
@@ -10,6 +11,7 @@ export default function Page() {
       <p id="react-dom-server">
         {'ReactDOMServer.version=' + ReactDOMServer.version}
       </p>
+      <ClientReact />
     </div>
   )
 }
diff --git a/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic/rsc-basic.test.ts
@@ -427,7 +427,7 @@ createNextDescribe(
     })
 
     it('should use stable react for pages', async () => {
-      const ssrPaths = ['/pages-react', '/pages-react-edge', '/app-react']
+      const ssrPaths = ['/pages-react', '/pages-react-edge']
       const promises = ssrPaths.map(async (pathname) => {
         const resPages$ = await next.render$(pathname)
         const ssrPagesReactVersions = [
@@ -437,11 +437,7 @@ createNextDescribe(
         ]
 
         ssrPagesReactVersions.forEach((version) => {
-          if (pathname === '/app-react') {
-            expect(version).toMatch('-canary-')
-          } else {
-            expect(version).not.toMatch('-canary-')
-          }
+          expect(version).not.toMatch('-canary-')
         })
       })
       await Promise.all(promises)
@@ -475,21 +471,40 @@ createNextDescribe(
         ]
       `)
 
-      await browser.loadPage(next.url + '/app-react')
+      browserPagesReactVersions.forEach((version) =>
+        expect(version).not.toMatch('-canary-')
+      )
+      browserEdgePagesReactVersions.forEach((version) =>
+        expect(version).not.toMatch('-canary-')
+      )
+    })
+
+    it('should use canary react for app', async () => {
+      const resPages$ = await next.render$('/app-react')
+      const ssrPagesReactVersions = [
+        await resPages$('#react').text(),
+        await resPages$('#react-dom').text(),
+        await resPages$('#react-dom-server').text(),
+        await resPages$('#client-react').text(),
+        await resPages$('#client-react-dom').text(),
+        await resPages$('#client-react-dom-server').text(),
+      ]
+
+      ssrPagesReactVersions.forEach((version) => {
+        expect(version).toMatch('-canary-')
+      })
+
+      const browser = await next.browser('/app-react')
       const browserAppReactVersions = await browser.eval(`
         [
           document.querySelector('#react').innerText,
           document.querySelector('#react-dom').innerText,
           document.querySelector('#react-dom-server').innerText,
+          document.querySelector('#client-react').innerText,
+          document.querySelector('#client-react-dom').innerText,
+          document.querySelector('#client-react-dom-server').innerText,
         ]
       `)
-
-      browserPagesReactVersions.forEach((version) =>
-        expect(version).not.toMatch('-canary-')
-      )
-      browserEdgePagesReactVersions.forEach((version) =>
-        expect(version).not.toMatch('-canary-')
-      )
       browserAppReactVersions.forEach((version) =>
         expect(version).toMatch('-canary-')
       )