From aa4efc11d919641bf50f699e7f3b9ecf33a4040c Mon Sep 17 00:00:00 2001 From: Jimmy Lai Date: Mon, 18 Sep 2023 20:02:14 +0200 Subject: [PATCH] build: add aliases for react-dom/server usage in server bundles (#55536) Some people are using `ReactDOM/server` in some contexts like App Routes and Server Actions. The changes in #55362 made it so that there were no more aliases if they wanted to use it so it would fallback to their versions of React, which might not include the APIs you would expect from canary. Also reverting the decision to proxy `ReactDOM/server` to `ReactDOM/server.edge` in the SSR layer as the APIs are not the same. --- .../crates/next-core/src/next_import_map.rs | 26 ++----- packages/next/src/build/webpack-config.ts | 75 +++++++++---------- 2 files changed, 40 insertions(+), 61 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 index adbd6b55f4d6..13221f6e0839 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 @@ -535,16 +535,7 @@ async fn insert_next_server_special_aliases( // layer TODO: add the rests import_map.insert_exact_alias( "react-dom/server", - request_to_import_mapping( - app_dir, - match runtime { - NextRuntime::Edge => "next/dist/compiled/react-dom/server.edge", - NextRuntime::NodeJs => { - "next/dist/server/future/route-modules/app-page/vendored/ssr/\ - react-dom-server-edge" - } - }, - ), + request_to_import_mapping(app_dir, "next/dist/compiled/react-dom/server"), ); import_map.insert_exact_alias( "react-dom/server.edge", @@ -656,16 +647,11 @@ async fn insert_next_server_special_aliases( // layer TODO: add the rests import_map.insert_exact_alias( "react-dom/server.edge", - request_to_import_mapping( - app_dir, - match runtime { - NextRuntime::Edge => "next/dist/compiled/react-dom/server.edge", - NextRuntime::NodeJs => { - "next/dist/server/future/route-modules/app-page/vendored/ssr/\ - react-dom-server-edge" - } - }, - ), + request_to_import_mapping(app_dir, "next/dist/compiled/react-dom/server.edge"), + ); + import_map.insert_exact_alias( + "react-dom/server", + request_to_import_mapping(app_dir, "next/dist/compiled/react-dom/server"), ); } (_, ServerContextType::Middleware) => {} diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts index 218a26fd5d4b..0dbd31c89cbe 100644 --- a/packages/next/src/build/webpack-config.ts +++ b/packages/next/src/build/webpack-config.ts @@ -396,48 +396,41 @@ function createRSCAliases( reactServerCondition?: boolean } ) { - let alias: Record = {} - if (opts.layer === 'app-pages-browser' || opts.isEdgeServer) { - alias = { - react$: `next/dist/compiled/react${bundledReactChannel}`, - '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/client$': `next/dist/compiled/react-dom${bundledReactChannel}/client`, - '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`, - 'react-server-dom-webpack/client.edge$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/client.edge`, - 'react-server-dom-webpack/server.edge$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/server.edge`, - 'react-server-dom-webpack/server.node$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/server.node`, - } - } else if (opts.layer === 'ssr') { - 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$: `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-dom/server.edge$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-dom-server-edge`, - 'react-server-dom-webpack/client.edge$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-server-dom-webpack-client-edge`, - // not essential but we're providing this alias for people who might use it - 'react-dom/server$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-dom-server-edge`, - } - } else if (opts.layer === 'rsc') { - 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$: `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`, - 'react-server-dom-webpack/server.node$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-server-dom-webpack-server-node`, - // not essential but we're providing this alias for people who might use it. - // A note here is that this will point toward the ReactDOMServer on the SSR layer - // TODO: add the rests - 'react-dom/server.edge$': `next/dist/server/future/route-modules/app-page/vendored/ssr/react-dom-server-edge`, + let alias: Record = { + react$: `next/dist/compiled/react${bundledReactChannel}`, + '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/client$': `next/dist/compiled/react-dom${bundledReactChannel}/client`, + '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`, + 'react-server-dom-webpack/client.edge$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/client.edge`, + 'react-server-dom-webpack/server.edge$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/server.edge`, + 'react-server-dom-webpack/server.node$': `next/dist/compiled/react-server-dom-webpack${bundledReactChannel}/server.node`, + } + + if (!opts.isEdgeServer) { + if (opts.layer === 'ssr') { + 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$: `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-dom/server.edge$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-dom-server-edge`, + '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 === 'rsc') { + 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$: `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`, + 'react-server-dom-webpack/server.node$': `next/dist/server/future/route-modules/app-page/vendored/${opts.layer}/react-server-dom-webpack-server-node`, + }) } - } else { - throw new Error(`Unexpected layer: ${opts.layer}`) } if (opts.isEdgeServer) {