Separate RSC and SSR jsx-runtime modules (#56438)

There should be no shared react packages in our server runtime. rsc should always be separate from ssr. This update reconfigures the runtiem to eliminate shared react modules. the jsx runtime will now be separate for RSC and SSR. this is necessary because the implementations for the jsx runtime rely on React and they need to see the right versions. Additionally I fixed an alias so that the shared subset react is used when using react-server condition. I also fixed a bug in 2 tests related to class/className. Note: this PR blocks upgrading React canary due to internal changes in how React state is managed in when using the `react-server` condition
vercel · Oct 4, 2023 · 65b0bb2 · 65b0bb2
1 parent 400c679
commit 65b0bb2
Show file tree

Hide file tree

Showing 13 changed files with 32 additions and 22 deletions.
diff --git a/packages/next-swc/crates/next-core/src/next_import_map.rs b/packages/next-swc/crates/next-core/src/next_import_map.rs
@@ -452,7 +452,7 @@ async fn insert_next_server_special_aliases(
                     match runtime {
                         NextRuntime::Edge => "next/dist/compiled/react/jsx-runtime",
                         NextRuntime::NodeJs => {
-                            "next/dist/server/future/route-modules/app-page/vendored/shared/\
+                            "next/dist/server/future/route-modules/app-page/vendored/ssr/\
                              react-jsx-runtime"
                         }
                     },
@@ -465,7 +465,7 @@ async fn insert_next_server_special_aliases(
                     match runtime {
                         NextRuntime::Edge => "next/dist/compiled/react/jsx-dev-runtime",
                         NextRuntime::NodeJs => {
-                            "next/dist/server/future/route-modules/app-page/vendored/shared/\
+                            "next/dist/server/future/route-modules/app-page/vendored/ssr/\
                              react-jsx-dev-runtime"
                         }
                     },
@@ -579,7 +579,7 @@ async fn insert_next_server_special_aliases(
                     match runtime {
                         NextRuntime::Edge => "next/dist/compiled/react/jsx-runtime",
                         NextRuntime::NodeJs => {
-                            "next/dist/server/future/route-modules/app-page/vendored/shared/\
+                            "next/dist/server/future/route-modules/app-page/vendored/rsc/\
                              react-jsx-runtime"
                         }
                     },
@@ -592,7 +592,7 @@ async fn insert_next_server_special_aliases(
                     match runtime {
                         NextRuntime::Edge => "next/dist/compiled/react/jsx-dev-runtime",
                         NextRuntime::NodeJs => {
-                            "next/dist/server/future/route-modules/app-page/vendored/shared/\
+                            "next/dist/server/future/route-modules/app-page/vendored/rsc/\
                              react-jsx-dev-runtime"
                         }
                     },

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -176,16 +176,16 @@ function createRSCAliases(
   if (!opts.isEdgeServer) {
     if (opts.layer === WEBPACK_LAYERS.serverSideRendering) {
       alias = Object.assign(alias, {
-        'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-runtime`,
-        'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-dev-runtime`,
+        'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-runtime`,
+        'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-dev-runtime`,
         react$: `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react`,
         'react-dom$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-dom`,
         'react-server-dom-webpack/client.edge$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-server-dom-webpack-client-edge`,
       })
     } else if (opts.layer === WEBPACK_LAYERS.reactServerComponents) {
       alias = Object.assign(alias, {
-        'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-runtime`,
-        'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/shared/react-jsx-dev-runtime`,
+        'react/jsx-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-runtime`,
+        'react/jsx-dev-runtime$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-jsx-dev-runtime`,
         react$: `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react`,
         'react-dom$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-dom`,
         'react-server-dom-webpack/server.edge$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-server-dom-webpack-server-edge`,

diff --git a/packages/next/src/server/future/route-modules/app-page/module.ts b/packages/next/src/server/future/route-modules/app-page/module.ts
@@ -15,13 +15,11 @@ import * as vendoredContexts from './vendored/contexts/entrypoints'
 
 let vendoredReactRSC
 let vendoredReactSSR
-let vendoredReactShared
 
 // the vendored Reacts are loaded from their original source in the edge runtime
 if (process.env.NEXT_RUNTIME !== 'edge') {
   vendoredReactRSC = require('./vendored/rsc/entrypoints')
   vendoredReactSSR = require('./vendored/ssr/entrypoints')
-  vendoredReactShared = require('./vendored/shared/entrypoints')
 }
 
 type AppPageUserlandModule = {
@@ -64,7 +62,6 @@ export class AppPageRouteModule extends RouteModule<
 const vendored = {
   'react-rsc': vendoredReactRSC,
   'react-ssr': vendoredReactSSR,
-  'react-shared': vendoredReactShared,
   contexts: vendoredContexts,
 }
 

diff --git a/packages/next/src/server/future/route-modules/app-page/vendored/rsc/entrypoints.ts b/packages/next/src/server/future/route-modules/app-page/vendored/rsc/entrypoints.ts
@@ -1,6 +1,7 @@
 import * as React from 'react'
-
 import * as ReactDOM from 'react-dom/server-rendering-stub'
+import * as ReactJsxDevRuntime from 'react/jsx-dev-runtime'
+import * as ReactJsxRuntime from 'react/jsx-runtime'
 
 function getAltProxyForBindingsDEV(
   type: 'Turbopack' | 'Webpack',
@@ -68,6 +69,8 @@ if (process.env.TURBOPACK) {
 
 export {
   React,
+  ReactJsxDevRuntime,
+  ReactJsxRuntime,
   ReactDOM,
   ReactServerDOMWebpackServerEdge,
   ReactServerDOMTurbopackServerEdge,

diff --git a/.../vendored/shared/react-jsx-dev-runtime.ts → ...age/vendored/rsc/react-jsx-dev-runtime.ts b/.../vendored/shared/react-jsx-dev-runtime.ts → ...age/vendored/rsc/react-jsx-dev-runtime.ts
@@ -1,3 +1,3 @@
 module.exports = require('../../module.compiled').vendored[
-  'react-shared'
+  'react-rsc'
 ].ReactJsxDevRuntime
diff --git a/...page/vendored/shared/react-jsx-runtime.ts → ...pp-page/vendored/rsc/react-jsx-runtime.ts b/...page/vendored/shared/react-jsx-runtime.ts → ...pp-page/vendored/rsc/react-jsx-runtime.ts
@@ -1,3 +1,3 @@
 module.exports = require('../../module.compiled').vendored[
-  'react-shared'
+  'react-rsc'
 ].ReactJsxRuntime
diff --git a/packages/next/src/server/future/route-modules/app-page/vendored/shared/entrypoints.ts b/packages/next/src/server/future/route-modules/app-page/vendored/shared/entrypoints.ts
diff --git a/packages/next/src/server/future/route-modules/app-page/vendored/ssr/entrypoints.ts b/packages/next/src/server/future/route-modules/app-page/vendored/ssr/entrypoints.ts
@@ -1,10 +1,10 @@
 import * as React from 'react'
-
 import * as ReactDOM from 'react-dom/server-rendering-stub'
+import * as ReactJsxDevRuntime from 'react/jsx-dev-runtime'
+import * as ReactJsxRuntime from 'react/jsx-runtime'
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as ReactDOMServerEdge from 'react-dom/server.edge'
-// eslint-disable-next-line import/no-extraneous-dependencies
 
 function getAltProxyForBindingsDEV(
   type: 'Turbopack' | 'Webpack',
@@ -52,6 +52,8 @@ if (process.env.TURBOPACK) {
 
 export {
   React,
+  ReactJsxDevRuntime,
+  ReactJsxRuntime,
   ReactDOM,
   ReactDOMServerEdge,
   ReactServerDOMTurbopackClientEdge,

diff --git a/packages/next/src/server/future/route-modules/app-page/vendored/ssr/react-jsx-dev-runtime.ts b/packages/next/src/server/future/route-modules/app-page/vendored/ssr/react-jsx-dev-runtime.ts
@@ -0,0 +1,3 @@
+module.exports = require('../../module.compiled').vendored[
+  'react-ssr'
+].ReactJsxDevRuntime
diff --git a/packages/next/src/server/future/route-modules/app-page/vendored/ssr/react-jsx-runtime.ts b/packages/next/src/server/future/route-modules/app-page/vendored/ssr/react-jsx-runtime.ts
@@ -0,0 +1,3 @@
+module.exports = require('../../module.compiled').vendored[
+  'react-ssr'
+].ReactJsxRuntime
diff --git a/packages/next/webpack.config.js b/packages/next/webpack.config.js
@@ -208,6 +208,9 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
               react$: `next/dist/compiled/react${
                 experimental ? '-experimental' : ''
               }/react.shared-subset`,
+              'next/dist/compiled/react$': `next/dist/compiled/react${
+                experimental ? '-experimental' : ''
+              }/react.shared-subset`,
             },
           },
           layer: 'react-server',
@@ -220,6 +223,9 @@ module.exports = ({ dev, turbo, bundleType, experimental }) => {
               react$: `next/dist/compiled/react${
                 experimental ? '-experimental' : ''
               }/react.shared-subset`,
+              'next/dist/compiled/react$': `next/dist/compiled/react${
+                experimental ? '-experimental' : ''
+              }/react.shared-subset`,
             },
           },
         },

diff --git a/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js b/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
@@ -2,7 +2,7 @@ import { GoogleMapsEmbed } from '@next/third-parties/google'
 
 const Page = () => {
   return (
-    <div class="container">
+    <div className="container">
       <h1>Google Maps Embed</h1>
       <GoogleMapsEmbed
         apiKey="XYZ"

diff --git a/test/e2e/app-dir/third-parties/app/youtube-embed/page.js b/test/e2e/app-dir/third-parties/app/youtube-embed/page.js
@@ -2,7 +2,7 @@ import { YouTubeEmbed } from '@next/third-parties/google'
 
 const Page = () => {
   return (
-    <div class="container">
+    <div className="container">
       <h1>Youtube Embed</h1>
       <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
     </div>