Handle cross-page client reference contamination in development

In development, React is tracking I/O for debugging purposes. Under some
circumstances it can happen that I/O that is cached in a global
(generally not recommended!) might be triggered by a component of one
page (the owner of that I/O) and also emitted as I/O debug info for a
component of another page that depends on it. If the owner references
client components in its props, those couldn't be serialized for the
other page because they don't exist in the client reference manifest of
that page, leading to the following error:

```
Error: Could not find the module "<ID>" in the React Client Manifest.
This is probably a bug in the React Server Components bundler.
```

To support that case, we're now looking for client references in
manifests of other pages, but only in development mode.

A better fix might be to pass a joint `debugBundlerConfig` option to
React, alongside the normal `bundlerConfig` option, or something like
that. But for now, this should suffice.

Another option we considered but disregarded is a change in React to
ignore missing client references when emitting them as debug info, and
emitting an omission placeholder instead. But for the general case this
would mask real bugs in the RSC bundler.

fixes #85883

Author: unstubbable

packages/next/errors.json

@@ -947,5 +947,8 @@
   "946": "Failed to deserialize errors.",
   "947": "Expected `sendErrorsToBrowser` to be defined in renderOpts.",
   "948": "Failed to serialize errors.",
-  "949": "Route %s errored during %s. These errors are normally ignored and may not prevent the route from prerendering but are logged here because build debugging is enabled.\n          \nOriginal Error: %s"
+  "949": "Route %s errored during %s. These errors are normally ignored and may not prevent the route from prerendering but are logged here because build debugging is enabled.\n          \nOriginal Error: %s",
+  "950": "The manifests singleton was not initialized.",
+  "951": "The client reference manifest for route \"%s\" does not exist.",
+  "952": "Cannot access \"%s\" without a work store."
 }

packages/next/src/build/templates/app-page.ts

@@ -21,12 +21,11 @@ import {
   createOpaqueFallbackRouteParams,
   type OpaqueFallbackRouteParams,
 } from '../../server/request/fallback-params'
-import { setReferenceManifestsSingleton } from '../../server/app-render/encryption-utils'
+import { setManifestsSingleton } from '../../server/app-render/manifests-singleton'
 import {
   isHtmlBotRequest,
   shouldServeStreamingMetadata,
 } from '../../server/lib/streaming-metadata'
-import { createServerModuleMap } from '../../server/app-render/action-utils'
 import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
 import { getIsPossibleServerAction } from '../../server/lib/server-action-request-meta'
 import {
@@ -400,13 +399,10 @@ export async function handler(
   // set the reference manifests to our global store so Server Action's
   // encryption util can access to them at the top level of the page module.
   if (serverActionsManifest && clientReferenceManifest) {
-    setReferenceManifestsSingleton({
+    setManifestsSingleton({
       page: srcPage,
       clientReferenceManifest,
       serverActionsManifest,
-      serverModuleMap: createServerModuleMap({
-        serverActionsManifest,
-      }),
     })
   }
 
@@ -540,8 +536,6 @@ export async function handler(
           nextFontManifest,
           reactLoadableManifest,
           subresourceIntegrityManifest,
-          serverActionsManifest,
-          clientReferenceManifest,
           setCacheStatus: routerServerContext?.setCacheStatus,
           setIsrStatus: routerServerContext?.setIsrStatus,
           setReactDebugChannel: routerServerContext?.setReactDebugChannel,

packages/next/src/build/templates/app-route.ts

@@ -8,8 +8,7 @@ import { patchFetch as _patchFetch } from '../../server/lib/patch-fetch'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import { addRequestMeta, getRequestMeta } from '../../server/request-meta'
 import { getTracer, type Span, SpanKind } from '../../server/lib/trace/tracer'
-import { setReferenceManifestsSingleton } from '../../server/app-render/encryption-utils'
-import { createServerModuleMap } from '../../server/app-render/action-utils'
+import { setManifestsSingleton } from '../../server/app-render/manifests-singleton'
 import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
 import { NodeNextRequest, NodeNextResponse } from '../../server/base-http/node'
 import {
@@ -185,13 +184,10 @@ export async function handler(
   // set the reference manifests to our global store so Server Action's
   // encryption util can access to them at the top level of the page module.
   if (serverActionsManifest && clientReferenceManifest) {
-    setReferenceManifestsSingleton({
+    setManifestsSingleton({
       page: srcPage,
       clientReferenceManifest,
       serverActionsManifest,
-      serverModuleMap: createServerModuleMap({
-        serverActionsManifest,
-      }),
     })
   }
 

packages/next/src/build/templates/edge-app-route.ts

@@ -1,5 +1,4 @@
-import { createServerModuleMap } from '../../server/app-render/action-utils'
-import { setReferenceManifestsSingleton } from '../../server/app-render/encryption-utils'
+import { setManifestsSingleton } from '../../server/app-render/manifests-singleton'
 import type { NextConfigComplete } from '../../server/config-shared'
 import { EdgeRouteModuleWrapper } from '../../server/web/edge-route-module-wrapper'
 
@@ -16,13 +15,10 @@ const rscManifest = self.__RSC_MANIFEST?.['VAR_PAGE']
 const rscServerManifest = maybeJSONParse(self.__RSC_SERVER_MANIFEST)
 
 if (rscManifest && rscServerManifest) {
-  setReferenceManifestsSingleton({
+  setManifestsSingleton({
     page: 'VAR_PAGE',
     clientReferenceManifest: rscManifest,
     serverActionsManifest: rscServerManifest,
-    serverModuleMap: createServerModuleMap({
-      serverActionsManifest: rscServerManifest,
-    }),
   })
 }
 

packages/next/src/build/templates/edge-ssr-app.ts

@@ -6,8 +6,7 @@ import * as pageMod from 'VAR_USERLAND'
 
 import type { RequestData } from '../../server/web/types'
 import type { NextConfigComplete } from '../../server/config-shared'
-import { setReferenceManifestsSingleton } from '../../server/app-render/encryption-utils'
-import { createServerModuleMap } from '../../server/app-render/action-utils'
+import { setManifestsSingleton } from '../../server/app-render/manifests-singleton'
 import { initializeCacheHandlers } from '../../server/use-cache/handlers'
 import { BaseServerSpan } from '../../server/lib/trace/constants'
 import { getTracer, SpanKind, type Span } from '../../server/lib/trace/tracer'
@@ -40,13 +39,10 @@ const rscManifest = self.__RSC_MANIFEST?.['VAR_PAGE']
 const rscServerManifest = maybeJSONParse(self.__RSC_SERVER_MANIFEST)
 
 if (rscManifest && rscServerManifest) {
-  setReferenceManifestsSingleton({
+  setManifestsSingleton({
     page: 'VAR_PAGE',
     clientReferenceManifest: rscManifest,
     serverActionsManifest: rscServerManifest,
-    serverModuleMap: createServerModuleMap({
-      serverActionsManifest: rscServerManifest,
-    }),
   })
 }
 
@@ -81,12 +77,10 @@ async function requestHandler(
     buildManifest,
     prerenderManifest,
     reactLoadableManifest,
-    clientReferenceManifest,
     subresourceIntegrityManifest,
     dynamicCssManifest,
     nextFontManifest,
     resolvedPathname,
-    serverActionsManifest,
     interceptionRoutePatterns,
     routerServerContext,
   } = prepareResult
@@ -129,8 +123,6 @@ async function requestHandler(
       reactLoadableManifest,
       subresourceIntegrityManifest,
       dynamicCssManifest,
-      serverActionsManifest,
-      clientReferenceManifest,
       setIsrStatus: routerServerContext?.setIsrStatus,
 
       dir: pageRouteModule.relativeProjectDir,

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -41,7 +41,7 @@ interface Options {
 type ModuleId = string | number /*| null*/
 
 // double indexed chunkId, filename
-export type ManifestChunks = Array<string>
+export type ManifestChunks = ReadonlyArray<string>
 
 const pluginState = getProxiedPluginState({
   ssrModules: {} as { [ssrModuleId: string]: ModuleInfo },

packages/next/src/export/index.ts

@@ -385,11 +385,6 @@ async function exportAppImpl(
       join(distDir, 'server', `${NEXT_FONT_MANIFEST}.json`)
     ),
     images: nextConfig.images,
-    ...(enabledDirectories.app
-      ? {
-          serverActionsManifest,
-        }
-      : {}),
     deploymentId: nextConfig.deploymentId,
     htmlLimitedBots: nextConfig.htmlLimitedBots.source,
     experimental: {

packages/next/src/server/app-render/action-handler.ts

@@ -49,7 +49,7 @@ import { warn } from '../../build/output/log'
 import { RequestCookies, ResponseCookies } from '../web/spec-extension/cookies'
 import { HeadersAdapter } from '../web/spec-extension/adapters/headers'
 import { fromNodeOutgoingHttpHeaders } from '../web/utils'
-import { selectWorkerForForwarding } from './action-utils'
+import { selectWorkerForForwarding, type ServerModuleMap } from './action-utils'
 import { isNodeNextRequest, isWebNextRequest } from '../base-http/helpers'
 import { RedirectStatusCode } from '../../client/components/redirect-status-code'
 import { synchronizeMutableCookies } from '../async-storage/request-store'
@@ -59,7 +59,7 @@ import { InvariantError } from '../../shared/lib/invariant-error'
 import { executeRevalidates } from '../revalidation-utils'
 import { getRequestMeta } from '../request-meta'
 import { setCacheBustingSearchParam } from '../../client/components/router-reducer/set-cache-busting-search-param'
-import { getServerModuleMap } from './encryption-utils'
+import { getServerModuleMap } from './manifests-singleton'
 
 function formDataFromSearchQueryString(query: string) {
   const searchParams = new URLSearchParams(query)
@@ -473,15 +473,6 @@ export function parseHostHeader(
       : undefined
 }
 
-type ServerModuleMap = Record<
-  string,
-  {
-    id: string
-    chunks: string[]
-    name: string
-  }
->
-
 type ServerActionsConfig = {
   bodySizeLimit?: SizeLimit
   allowedOrigins?: string[]
@@ -522,7 +513,7 @@ export async function handleAction({
   metadata: AppPageRenderResultMetadata
 }): Promise<HandleActionResult> {
   const contentType = req.headers['content-type']
-  const { serverActionsManifest, page } = ctx.renderOpts
+  const { page } = ctx.renderOpts
   const serverModuleMap = getServerModuleMap()
 
   const {
@@ -640,11 +631,7 @@ export async function handleAction({
   const actionWasForwarded = Boolean(req.headers['x-action-forwarded'])
 
   if (actionId) {
-    const forwardedWorker = selectWorkerForForwarding(
-      actionId,
-      page,
-      serverActionsManifest
-    )
+    const forwardedWorker = selectWorkerForForwarding(actionId, page)
 
     // If forwardedWorker is truthy, it means there isn't a worker for the action
     // in the current handler, so we forward the request to a worker that has the action.
@@ -685,7 +672,7 @@ export async function handleAction({
       { isAction: true },
       async (): Promise<HandleActionResult> => {
         // We only use these for fetch actions -- MPA actions handle them inside `decodeAction`.
-        let actionModId: string | undefined
+        let actionModId: string | number | undefined
         let boundActionArguments: unknown[] = []
 
         if (
@@ -1214,7 +1201,7 @@ async function executeActionAndPrepareForRender<
 function getActionModIdOrError(
   actionId: string | null,
   serverModuleMap: ServerModuleMap
-): string {
+): string | number {
   // if we're missing the action ID header, we can't do any further processing
   if (!actionId) {
     throw new InvariantError("Missing 'next-action' header.")

packages/next/src/server/app-render/action-utils.ts

@@ -2,8 +2,18 @@ import type { ActionManifest } from '../../build/webpack/plugins/flight-client-e
 import { normalizeAppPath } from '../../shared/lib/router/utils/app-paths'
 import { pathHasPrefix } from '../../shared/lib/router/utils/path-has-prefix'
 import { removePathPrefix } from '../../shared/lib/router/utils/remove-path-prefix'
+import { getServerActionsManifest } from './manifests-singleton'
 import { workAsyncStorage } from './work-async-storage.external'
 
+export interface ServerModuleMap {
+  readonly [name: string]: {
+    readonly id: string | number
+    readonly name: string
+    readonly chunks: Readonly<Array<string>> // currently not used
+    readonly async?: boolean
+  }
+}
+
 // This function creates a Flight-acceptable server module map proxy from our
 // Server Reference Manifest similar to our client module map.
 // This is because our manifest contains a lot of internal Next.js data that
@@ -12,7 +22,7 @@ export function createServerModuleMap({
   serverActionsManifest,
 }: {
   serverActionsManifest: ActionManifest
-}) {
+}): ServerModuleMap {
   return new Proxy(
     {},
     {
@@ -61,11 +71,8 @@ export function createServerModuleMap({
  * Checks if the requested action has a worker for the current page.
  * If not, it returns the first worker that has a handler for the action.
  */
-export function selectWorkerForForwarding(
-  actionId: string,
-  pageName: string,
-  serverActionsManifest: ActionManifest
-) {
+export function selectWorkerForForwarding(actionId: string, pageName: string) {
+  const serverActionsManifest = getServerActionsManifest()
   const workers =
     serverActionsManifest[
       process.env.NEXT_RUNTIME === 'edge' ? 'edge' : 'node'