From c628076e914d311dc0c86276f5fd24abdb26ee07 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Mon, 18 Sep 2023 12:48:00 -0500 Subject: [PATCH 1/2] Disable flakey middleware-dev-error test (#55539) x-ref: [slack thread](https://vercel.slack.com/archives/C04DUD7EB1B/p1695039655548129) --- test/integration/middleware-dev-errors/test/index.test.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/test/integration/middleware-dev-errors/test/index.test.js b/test/integration/middleware-dev-errors/test/index.test.js index 6c18888e694c6..fdbaa74664449 100644 --- a/test/integration/middleware-dev-errors/test/index.test.js +++ b/test/integration/middleware-dev-errors/test/index.test.js @@ -249,9 +249,10 @@ describe('Middleware development errors', () => { it('logs the error correctly', async () => { await fetchViaHTTP(context.appPort, '/') expect(context.logs.output).toContain(`Expected '{', got '}'`) - expect(context.logs.output.split(`Expected '{', got '}'`).length).toEqual( - 2 - ) + // TODO: investigate occasional duplicate errors causing flakiness + // expect(context.logs.output.split(`Expected '{', got '}'`).length).toEqual( + // 2 + // ) }) it('renders the error correctly and recovers', async () => { From aa4efc11d919641bf50f699e7f3b9ecf33a4040c Mon Sep 17 00:00:00 2001 From: Jimmy Lai Date: Mon, 18 Sep 2023 20:02:14 +0200 Subject: [PATCH 2/2] 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 adbd6b55f4d63..13221f6e08394 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 218a26fd5d4bb..0dbd31c89cbeb 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) {