Transform client reference in middleware layer (#66294)

### What Use `next-flight-loader` to transform the client components into client reference in middleware and instrumentation. Add related required webpack aliases, such as alias for `react-server-dom-webpack` ### Why issue reported in #65424 (comment)
vercel · May 30, 2024 · 92443b6 · 92443b6
1 parent a95356a
commit 92443b6
Show file tree

Hide file tree

Showing 15 changed files with 97 additions and 13 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
@@ -583,10 +583,9 @@ async fn insert_next_server_special_aliases(
 
             rsc_aliases(import_map, project_path, ty, runtime, next_config).await?;
         }
-        ServerContextType::Middleware => {
+        ServerContextType::Middleware | ServerContextType::Instrumentation => {
             rsc_aliases(import_map, project_path, ty, runtime, next_config).await?;
         }
-        ServerContextType::Instrumentation => {}
     }
 
     // see https://github.com/vercel/next.js/blob/8013ef7372fc545d49dbd060461224ceb563b454/packages/next/src/build/webpack-config.ts#L1449-L1531

diff --git a/packages/next-swc/crates/next-core/src/next_server/context.rs b/packages/next-swc/crates/next-core/src/next_server/context.rs
@@ -108,6 +108,7 @@ impl ServerContextType {
                 | ServerContextType::AppRoute { .. }
                 | ServerContextType::PagesApi { .. }
                 | ServerContextType::Middleware { .. }
+                | ServerContextType::Instrumentation { .. }
         )
     }
 }

diff --git a/packages/next-swc/crates/next-core/src/next_shared/resolve.rs b/packages/next-swc/crates/next-core/src/next_shared/resolve.rs
@@ -362,7 +362,8 @@ impl AfterResolvePlugin for NextNodeSharedRuntimeResolvePlugin {
             "next/dist/server/future/route-modules/{}/vendored/contexts/{}.js",
             match self.context {
                 ServerContextType::Pages { .. } => "pages",
-                ServerContextType::AppRoute { .. } => "app-route",
+                ServerContextType::AppRoute { .. } | ServerContextType::Instrumentation { .. } =>
+                    "app-route",
                 ServerContextType::AppSSR { .. } | ServerContextType::AppRSC { .. } => "app-page",
                 _ => "unknown",
             },

diff --git a/packages/next/src/build/create-compiler-aliases.ts b/packages/next/src/build/create-compiler-aliases.ts
@@ -235,6 +235,16 @@ export function createAppRouterApiAliases(isServerOnlyLayer: boolean) {
   return aliasMap
 }
 
+export function createRSCRendererAliases(bundledReactChannel: string) {
+  return {
+    // react-server-dom-webpack alias
+    '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`,
+  }
+}
+
 export function createRSCAliases(
   bundledReactChannel: string,
   {
@@ -262,10 +272,7 @@ export function createRSCAliases(
     '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 alias
-    '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`,
+    ...createRSCRendererAliases(bundledReactChannel),
   }
 
   if (!isEdgeServer) {

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -82,6 +82,7 @@ import {
   createRSCAliases,
   createNextApiEsmAliases,
   createAppRouterApiAliases,
+  createRSCRendererAliases,
 } from './create-compiler-aliases'
 import { hasCustomExportOutput } from '../export/utils'
 import { CssChunkingPlugin } from './webpack/plugins/css-chunking-plugin'
@@ -529,6 +530,7 @@ export default async function getBaseWebpackConfig(
     : []
 
   const instrumentLayerLoaders = [
+    'next-flight-loader',
     // When using Babel, we will have to add the SWC loader
     // as an additional pass to handle RSC correctly.
     // This will cause some performance overhead but
@@ -538,6 +540,7 @@ export default async function getBaseWebpackConfig(
   ].filter(Boolean)
 
   const middlewareLayerLoaders = [
+    'next-flight-loader',
     // When using Babel, we will have to use SWC to do the optimization
     // for middleware to tree shake the unused default optimized imports like "next/server".
     // This will cause some performance overhead but
@@ -1470,6 +1473,8 @@ export default async function getBaseWebpackConfig(
               use: middlewareLayerLoaders,
               resolve: {
                 conditionNames: reactServerCondition,
+                // Always use default channels when use installed react
+                alias: createRSCRendererAliases(''),
               },
             },
             {
@@ -1478,6 +1483,8 @@ export default async function getBaseWebpackConfig(
               use: instrumentLayerLoaders,
               resolve: {
                 conditionNames: reactServerCondition,
+                // Always use default channels when use installed react
+                alias: createRSCRendererAliases(''),
               },
             },
             ...(hasAppDir

diff --git a/test/e2e/module-layer/lib/mixed-lib/shared-module.js b/test/e2e/module-layer/lib/mixed-lib/shared-module.js
@@ -0,0 +1,4 @@
+import Link from 'next/link'
+
+export const textValue = 'text-value'
+export const TestLink = Link
diff --git a/test/e2e/module-layer/middleware.js b/test/e2e/module-layer/middleware.js
@@ -10,7 +10,7 @@ export function middleware(request) {
     throw new Error('React.useState should not be defined in server layer')
   }
 
-  if (request.nextUrl.pathname === '/react-version') {
+  if (request.nextUrl.pathname === '/middleware') {
     return Response.json({
       React: Object.keys(ReactObject),
     })

diff --git a/test/e2e/module-layer/module-layer.test.ts b/test/e2e/module-layer/module-layer.test.ts
@@ -4,10 +4,6 @@ import { getRedboxSource, hasRedbox, retry } from 'next-test-utils'
 describe('module layer', () => {
   const { next, isNextStart, isNextDev, isTurbopack } = nextTestSetup({
     files: __dirname,
-    dependencies: {
-      react: '19.0.0-rc-915b914b3a-20240515',
-      'react-dom': '19.0.0-rc-915b914b3a-20240515',
-    },
   })
 
   function runTests() {
@@ -37,7 +33,7 @@ describe('module layer', () => {
     }
 
     it('should render installed react-server condition for middleware', async () => {
-      const json = await next.fetch('/react-version').then((res) => res.json())
+      const json = await next.fetch('/middleware').then((res) => res.json())
       expect(json.React).toContain('version') // basic react-server export
       expect(json.React).not.toContain('useEffect') // no client api export
     })

diff --git a/test/e2e/rsc-layers-transform/app/layout.js b/test/e2e/rsc-layers-transform/app/layout.js
@@ -0,0 +1,7 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/rsc-layers-transform/app/page.js b/test/e2e/rsc-layers-transform/app/page.js
@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'page'
+}
diff --git a/test/e2e/rsc-layers-transform/instrumentation.js b/test/e2e/rsc-layers-transform/instrumentation.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { textValue } from './lib/shared-module'
+
+export async function register() {
+  // TODO: support react-server condition for instrumentation hook in turbopack
+  if (!process.env.TURBOPACK && Object(React).useState) {
+    throw new Error('instrumentation is not working correctly in server layer')
+  }
+  console.log('instrumentation:register')
+  console.log('instrumentation:text:' + textValue)
+}
diff --git a/test/e2e/rsc-layers-transform/lib/shared-module.js b/test/e2e/rsc-layers-transform/lib/shared-module.js
@@ -0,0 +1,4 @@
+import Link from 'next/link'
+
+export const textValue = 'text-value'
+export const TestLink = Link
diff --git a/test/e2e/rsc-layers-transform/middleware.js b/test/e2e/rsc-layers-transform/middleware.js
@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server'
+import { textValue, TestLink } from './lib/shared-module'
+
+export function middleware(request) {
+  if (request.nextUrl.pathname === '/middleware') {
+    return Response.json({
+      clientReference: TestLink.$$typeof.toString(),
+      textValue,
+    })
+  }
+
+  return NextResponse.next()
+}
diff --git a/test/e2e/rsc-layers-transform/next.config.js b/test/e2e/rsc-layers-transform/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    instrumentationHook: true,
+  },
+}
diff --git a/test/e2e/rsc-layers-transform/rsc-layers-transform.test.ts b/test/e2e/rsc-layers-transform/rsc-layers-transform.test.ts
@@ -0,0 +1,26 @@
+import { nextTestSetup } from 'e2e-utils'
+
+// TODO: support react-server condition for instrumentation hook in turbopack
+;(process.env.TURBOPACK ? describe.skip : describe)(
+  'rsc layers transform',
+  () => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+    })
+
+    it('should render installed react-server condition for middleware', async () => {
+      const json = await next.fetch('/middleware').then((res) => res.json())
+
+      expect(json).toEqual({
+        textValue: 'text-value',
+        clientReference: 'Symbol(react.client.reference)',
+      })
+    })
+
+    it('should call instrumentation hook without errors', async () => {
+      const output = next.cliOutput
+      expect(output).toContain('instrumentation:register')
+      expect(output).toContain('instrumentation:text:text-value')
+    })
+  }
+)