Fix shared layer bundling in Edge Runtime (#51348)

Our shared layer matcher doesn't contain `next/dist/esm`, which breaks Server Actions when there're cookie/header accesses.

Closes #50099. Fix NEXT-1229

Author: shuding

packages/next/src/build/webpack-config.ts

@@ -97,7 +97,7 @@ const babelIncludeRegexes: RegExp[] = [
 const reactPackagesRegex = /^(react|react-dom|react-server-dom-webpack)($|\/)/
 
 const asyncStoragesRegex =
-  /next[\\/]dist[\\/]client[\\/]components[\\/](static-generation-async-storage|action-async-storage|request-async-storage)/
+  /next[\\/]dist[\\/](esm[\\/])?client[\\/]components[\\/](static-generation-async-storage|action-async-storage|request-async-storage)/
 
 // exports.<conditionName>
 const edgeConditionNames = [
@@ -1894,6 +1894,12 @@ export default async function getBaseWebpackConfig(
       rules: [
         ...(hasAppDir
           ? [
+              {
+                // Make sure that AsyncLocalStorage module instance is shared between server and client
+                // layers.
+                layer: WEBPACK_LAYERS.shared,
+                test: asyncStoragesRegex,
+              },
               {
                 // All app dir layers need to use this configured resolution logic
                 issuerLayer: {
@@ -1957,12 +1963,6 @@ export default async function getBaseWebpackConfig(
                   loader: 'next-flight-loader',
                 },
               },
-              {
-                // Make sure that AsyncLocalStorage module instance is shared between server and client
-                // layers.
-                layer: WEBPACK_LAYERS.shared,
-                test: asyncStoragesRegex,
-              },
             ]
           : []),
         // TODO: FIXME: do NOT webpack 5 support with this

test/e2e/app-dir/actions/app-action.test.ts

@@ -351,6 +351,23 @@ createNextDescribe(
           return browser.eval('window.location.toString()')
         }, 'https://example.com/')
       })
+
+      it('should allow cookie and header async storages', async () => {
+        const browser = await next.browser('/client/edge')
+
+        const currentTestCookie = await browser.eval(
+          `document.cookie.match(/test-cookie=(\\d+)/)?.[1]`
+        )
+
+        await browser.elementByCss('#get-headers').click()
+
+        await check(async () => {
+          const newTestCookie = await browser.eval(
+            `document.cookie.match(/test-cookie=(\\d+)/)?.[1]`
+          )
+          return newTestCookie !== currentTestCookie ? 'success' : 'failure'
+        }, 'success')
+      })
     })
 
     describe('fetch actions', () => {

test/e2e/app-dir/actions/app/client/edge/page.js

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 
-import double, { inc, dec, redirectAction } from '../actions'
+import double, { inc, dec, redirectAction, getHeaders } from '../actions'
 
 export default function Counter() {
   const [count, setCount] = useState(0)
@@ -52,6 +52,11 @@ export default function Counter() {
           redirect external
         </button>
       </form>
+      <form>
+        <button id="get-headers" formAction={() => getHeaders()}>
+          get headers
+        </button>
+      </form>
     </div>
   )
 }