Fix: css in next/dynamic component in edge runtime (#64382)

packages/next/src/server/web/adapter.ts

@@ -244,7 +244,13 @@ export async function adapter(
           )
       )
     }
-    return params.handler(request, event)
+    return RequestAsyncStorageWrapper.wrap(
+      requestAsyncStorage,
+      {
+        req: request,
+      },
+      () => params.handler(request, event)
+    )
   })
 
   // check if response is a Response object

packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx

@@ -5,10 +5,10 @@ export function PreloadCss({ moduleIds }: { moduleIds: string[] | undefined }) {
   if (typeof window !== 'undefined') {
     return null
   }
-  const {
-    getExpectedRequestStore,
-  } = require('../../../client/components/request-async-storage.external')
-  const requestStore = getExpectedRequestStore()
+  const getExpectedRequestStore: typeof import('../../../client/components/request-async-storage.external').getExpectedRequestStore =
+    require('../../../client/components/request-async-storage.external').getExpectedRequestStore
+
+  const requestStore = getExpectedRequestStore('next/dynamic css')
 
   const allFiles = []
 

test/e2e/app-dir/dynamic-css/app/ssr/edge/page.js

@@ -0,0 +1,3 @@
+export { default } from '../page'
+
+export const runtime = 'edge'

test/e2e/app-dir/dynamic-css/index.test.ts

@@ -31,6 +31,23 @@ createNextDescribe(
       })
     })
 
+    it('should only apply corresponding css for page loaded in edge runtime', async () => {
+      const browser = await next.browser('/ssr/edge')
+      await retry(async () => {
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('.text')).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+        // Default border width, which is not effected by bar.css that is not loaded in /ssr
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('.text')).borderWidth`
+          )
+        ).toBe('0px')
+      })
+    })
+
     it('should only apply corresponding css for page loaded that /another', async () => {
       const browser = await next.browser('/another')
       await retry(async () => {