create instance once

packages/next/src/client/components/action-async-storage-instance.ts

@@ -0,0 +1,4 @@
+import type { ActionAsyncStorage } from './action-async-storage.external'
+import { createAsyncLocalStorage } from './async-local-storage'
+
+export const actionAsyncStorage: ActionAsyncStorage = createAsyncLocalStorage()

packages/next/src/client/components/action-async-storage.external.ts

@@ -1,11 +1,13 @@
 import type { AsyncLocalStorage } from 'async_hooks'
-import { createAsyncLocalStorage } from './async-local-storage'
 
+// Share the instance module in the next-shared layer
+;('TURBOPACK { transition: next-shared }')
+import { actionAsyncStorage } from './action-async-storage-instance'
 export interface ActionStore {
   readonly isAction?: boolean
   readonly isAppRoute?: boolean
 }
 
 export type ActionAsyncStorage = AsyncLocalStorage<ActionStore>
 
-export const actionAsyncStorage: ActionAsyncStorage = createAsyncLocalStorage()
+export { actionAsyncStorage }

packages/next/src/client/components/request-async-storage-instance.ts

@@ -0,0 +1,5 @@
+import { createAsyncLocalStorage } from './async-local-storage'
+import type { RequestAsyncStorage } from './request-async-storage.external'
+
+export const requestAsyncStorage: RequestAsyncStorage =
+  createAsyncLocalStorage()

packages/next/src/client/components/request-async-storage.external.ts

@@ -4,8 +4,9 @@ import type { ResponseCookies } from '../../server/web/spec-extension/cookies'
 import type { ReadonlyHeaders } from '../../server/web/spec-extension/adapters/headers'
 import type { ReadonlyRequestCookies } from '../../server/web/spec-extension/adapters/request-cookies'
 
+// Share the instance module in the next-shared layer
 ;('TURBOPACK { transition: next-shared }')
-import { createAsyncLocalStorage } from './async-local-storage'
+import { requestAsyncStorage } from './request-async-storage-instance'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 
 export interface RequestStore {
@@ -21,8 +22,7 @@ export interface RequestStore {
 
 export type RequestAsyncStorage = AsyncLocalStorage<RequestStore>
 
-export const requestAsyncStorage: RequestAsyncStorage =
-  createAsyncLocalStorage()
+export { requestAsyncStorage }
 
 export function getExpectedRequestStore(callingExpression: string) {
   const store = requestAsyncStorage.getStore()

packages/next/src/client/components/static-generation-async-storage-instance.ts

@@ -0,0 +1,5 @@
+import type { StaticGenerationAsyncStorage } from './static-generation-async-storage.external'
+import { createAsyncLocalStorage } from './async-local-storage'
+
+export const staticGenerationAsyncStorage: StaticGenerationAsyncStorage =
+  createAsyncLocalStorage()

packages/next/src/client/components/static-generation-async-storage.external.ts

@@ -5,7 +5,9 @@ import type { FetchMetrics } from '../../server/base-http'
 import type { Revalidate } from '../../server/lib/revalidate'
 import type { PrerenderState } from '../../server/app-render/dynamic-rendering'
 
-import { createAsyncLocalStorage } from './async-local-storage'
+// Share the instance module in the next-shared layer
+;('TURBOPACK { transition: next-shared }')
+import { staticGenerationAsyncStorage } from './static-generation-async-storage-instance'
 
 export interface StaticGenerationStore {
   readonly isStaticGeneration: boolean
@@ -53,5 +55,4 @@ export interface StaticGenerationStore {
 export type StaticGenerationAsyncStorage =
   AsyncLocalStorage<StaticGenerationStore>
 
-export const staticGenerationAsyncStorage: StaticGenerationAsyncStorage =
-  createAsyncLocalStorage()
+export { staticGenerationAsyncStorage }

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

@@ -1,19 +1,19 @@
 'use client'
 
-import { requestAsyncStorage } from '../../../client/components/request-async-storage.external'
+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 requestStore = requestAsyncStorage.getStore()
+  const requestStore = getExpectedRequestStore('next/dynamic css')
   const allFiles = []
 
   // Search the current dynamic call unique key id in react loadable manifest,
   // and find the corresponding CSS files to preload
-  if (requestStore?.reactLoadableManifest && moduleIds) {
+  if (requestStore.reactLoadableManifest && moduleIds) {
     const manifest = requestStore.reactLoadableManifest
     for (const key of moduleIds) {
       if (!manifest[key]) continue