From 65b0bb24af8a14d20871d830acc5a12ee03989cd Mon Sep 17 00:00:00 2001 From: Josh Story Date: Wed, 4 Oct 2023 13:29:10 -0700 Subject: [PATCH] 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 --- packages/next-swc/crates/next-core/src/next_import_map.rs | 8 ++++---- packages/next/src/build/webpack-config.ts | 8 ++++---- .../src/server/future/route-modules/app-page/module.ts | 3 --- .../route-modules/app-page/vendored/rsc/entrypoints.ts | 5 ++++- .../vendored/{shared => rsc}/react-jsx-dev-runtime.ts | 2 +- .../vendored/{shared => rsc}/react-jsx-runtime.ts | 2 +- .../route-modules/app-page/vendored/shared/entrypoints.ts | 4 ---- .../route-modules/app-page/vendored/ssr/entrypoints.ts | 6 ++++-- .../app-page/vendored/ssr/react-jsx-dev-runtime.ts | 3 +++ .../app-page/vendored/ssr/react-jsx-runtime.ts | 3 +++ packages/next/webpack.config.js | 6 ++++++ .../app-dir/third-parties/app/google-maps-embed/page.js | 2 +- test/e2e/app-dir/third-parties/app/youtube-embed/page.js | 2 +- 13 files changed, 32 insertions(+), 22 deletions(-) rename packages/next/src/server/future/route-modules/app-page/vendored/{shared => rsc}/react-jsx-dev-runtime.ts (82%) rename packages/next/src/server/future/route-modules/app-page/vendored/{shared => rsc}/react-jsx-runtime.ts (82%) delete mode 100644 packages/next/src/server/future/route-modules/app-page/vendored/shared/entrypoints.ts create mode 100644 packages/next/src/server/future/route-modules/app-page/vendored/ssr/react-jsx-dev-runtime.ts create mode 100644 packages/next/src/server/future/route-modules/app-page/vendored/ssr/react-jsx-runtime.ts 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 index 63cf8cf828d4a..fc2a29ec84456 100644 --- 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 index 2c417158370ab..de5d19591b091 100644 --- 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 index 5cc33c1a60376..5a34be6759ad4 100644 --- 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 index e693d48484574..5b7d91e3601b2 100644 --- 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/packages/next/src/server/future/route-modules/app-page/vendored/shared/react-jsx-dev-runtime.ts b/packages/next/src/server/future/route-modules/app-page/vendored/rsc/react-jsx-dev-runtime.ts similarity index 82% rename from packages/next/src/server/future/route-modules/app-page/vendored/shared/react-jsx-dev-runtime.ts rename to packages/next/src/server/future/route-modules/app-page/vendored/rsc/react-jsx-dev-runtime.ts index 9623bb4a90ae0..324b0f5a2faf8 100644 --- a/packages/next/src/server/future/route-modules/app-page/vendored/shared/react-jsx-dev-runtime.ts +++ b/packages/next/src/server/future/route-modules/app-page/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/packages/next/src/server/future/route-modules/app-page/vendored/shared/react-jsx-runtime.ts b/packages/next/src/server/future/route-modules/app-page/vendored/rsc/react-jsx-runtime.ts similarity index 82% rename from packages/next/src/server/future/route-modules/app-page/vendored/shared/react-jsx-runtime.ts rename to packages/next/src/server/future/route-modules/app-page/vendored/rsc/react-jsx-runtime.ts index b7d24f304f96b..7335eb8d8c1e1 100644 --- a/packages/next/src/server/future/route-modules/app-page/vendored/shared/react-jsx-runtime.ts +++ b/packages/next/src/server/future/route-modules/app-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 deleted file mode 100644 index b5a1bf1a3fd02..0000000000000 --- a/packages/next/src/server/future/route-modules/app-page/vendored/shared/entrypoints.ts +++ /dev/null @@ -1,4 +0,0 @@ -import * as ReactJsxDevRuntime from 'react/jsx-dev-runtime' -import * as ReactJsxRuntime from 'react/jsx-runtime' - -export { ReactJsxDevRuntime, ReactJsxRuntime } 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 index ad3ee57d8f1f5..70f432fff4e88 100644 --- 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 new file mode 100644 index 0000000000000..501951272d5a7 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..82499202f03eb --- /dev/null +++ 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 index bc8a5c72a2f1e..ec4880d319f8b 100644 --- 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 index 28210fe9bab6f..f9e312c9116f9 100644 --- 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 ( -
+

Google Maps Embed

{ return ( -
+

Youtube Embed