Fix ASL bundling for dynamic css

vercel · Apr 13, 2024 · 84f3e0d · 84f3e0d
1 parent 9b77ede
commit 84f3e0d
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -1383,15 +1383,14 @@ export default async function getBaseWebpackConfig(
                 // Alias react for switching between default set and share subset.
                 oneOf: [
                   {
-                    exclude: asyncStoragesRegex,
                     issuerLayer: isWebpackServerOnlyLayer,
                     test: {
                       // Resolve it if it is a source code file, and it has NOT been
                       // opted out of bundling.
                       and: [
                         codeCondition.test,
                         {
-                          not: [optOutBundlingPackageRegex],
+                          not: [optOutBundlingPackageRegex, asyncStoragesRegex],
                         },
                       ],
                     },
@@ -1499,6 +1498,7 @@ export default async function getBaseWebpackConfig(
                   {
                     test: codeCondition.test,
                     issuerLayer: WEBPACK_LAYERS.serverSideRendering,
+                    exclude: asyncStoragesRegex,
                     use: appSSRLayerLoaders,
                     resolve: {
                       mainFields: getMainField(compilerType, true),

diff --git a/packages/next/src/lib/constants.ts b/packages/next/src/lib/constants.ts
@@ -170,7 +170,6 @@ const WEBPACK_LAYERS = {
     clientOnly: [
       WEBPACK_LAYERS_NAMES.serverSideRendering,
       WEBPACK_LAYERS_NAMES.appPagesBrowser,
-      WEBPACK_LAYERS_NAMES.shared,
     ],
     nonClientServerTarget: [
       // middleware and pages api

diff --git a/packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx b/packages/next/src/shared/lib/lazy-dynamic/preload-css.tsx
@@ -1,14 +1,14 @@
 'use client'
 
+import { getExpectedRequestStore } from '../../../client/components/request-async-storage.external'
+
 export function PreloadCss({ moduleIds }: { moduleIds: string[] | undefined }) {
   // Early return in client compilation and only load requestStore on server side
   if (typeof window !== 'undefined') {
     return null
   }
-  const {
-    getExpectedRequestStore,
-  } = require('../../../client/components/request-async-storage.external')
-  const requestStore = getExpectedRequestStore()
+
+  const requestStore = getExpectedRequestStore('next/dynamic css')
 
   const allFiles = []
 

diff --git a/test/e2e/app-dir/dynamic-css/app/ssr/edge/page.js b/test/e2e/app-dir/dynamic-css/app/ssr/edge/page.js
@@ -0,0 +1,3 @@
+export { default } from '../page'
+
+export const runtime = 'edge'
diff --git a/test/e2e/app-dir/dynamic-css/index.test.ts b/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 () => {
@@ -47,5 +64,10 @@ createNextDescribe(
         ).toBe('1px')
       })
     })
+
+    it('should not throw with accessing to ALS in preload css', async () => {
+      const output = next.cliOutput
+      expect(output).not.toContain('was called outside a request scope')
+    })
   }
 )