diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js index 7c658ca7a5e7..a1fc3deca890 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopack.js @@ -263,8 +263,9 @@ export function getModuleDebugInfo( const debugInfo: ReactDebugInfo = []; let i = 0; while (i < chunks.length) { - const chunkFilename = chunks[i++]; - addChunkDebugInfo(debugInfo, chunkFilename); + const chunk = chunks[i++]; + // A merged chunk is `[mergedChunkFilename, ...]`; use its own filename. + addChunkDebugInfo(debugInfo, typeof chunk === 'string' ? chunk : chunk[0]); } return debugInfo; } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js index a2135651df2c..fdcba5218bb8 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackBrowser.js @@ -13,7 +13,9 @@ import type { ReactAsyncInfo, } from 'shared/ReactTypes'; -export function loadChunk(filename: string): Promise { +import type {Chunk} from '../shared/ReactFlightImportMetadata'; + +export function loadChunk(filename: Chunk): Promise { return __turbopack_load_by_url__(filename); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js index 600f80c6fc7a..be0298dff696 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigBundlerTurbopackServer.js @@ -9,7 +9,9 @@ import type {ReactDebugInfo} from 'shared/ReactTypes'; -export function loadChunk(filename: string): Promise { +import type {Chunk} from '../shared/ReactFlightImportMetadata'; + +export function loadChunk(filename: Chunk): Promise { return __turbopack_load_by_url__(filename); } diff --git a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js index d68f0802aa5f..6e4626605b64 100644 --- a/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js +++ b/packages/react-server-dom-turbopack/src/client/ReactFlightClientConfigTargetTurbopackServer.js @@ -9,6 +9,8 @@ import {preinitScriptForSSR} from 'react-client/src/ReactFlightClientConfig'; +import type {Chunk} from '../shared/ReactFlightImportMetadata'; + export type ModuleLoading = null | { prefix: string, crossOrigin?: 'use-credentials' | '', @@ -16,14 +18,15 @@ export type ModuleLoading = null | { export function prepareDestinationWithChunks( moduleLoading: ModuleLoading, - // Chunks are single-indexed filenames - chunks: Array, + chunks: Array, nonce: ?string, ) { if (moduleLoading !== null) { for (let i = 0; i < chunks.length; i++) { + const chunk = chunks[i]; + // A merged chunk is `[mergedChunkFilename, ...]`; preinit its own URL. preinitScriptForSSR( - moduleLoading.prefix + chunks[i], + moduleLoading.prefix + (typeof chunk === 'string' ? chunk : chunk[0]), nonce, moduleLoading.crossOrigin, ); diff --git a/packages/react-server-dom-turbopack/src/shared/ReactFlightImportMetadata.js b/packages/react-server-dom-turbopack/src/shared/ReactFlightImportMetadata.js index 7cfce93deb25..1737136dc9b0 100644 --- a/packages/react-server-dom-turbopack/src/shared/ReactFlightImportMetadata.js +++ b/packages/react-server-dom-turbopack/src/shared/ReactFlightImportMetadata.js @@ -7,10 +7,20 @@ * @flow */ +// A chunk is either a plain chunk filename, or a merged chunk that bundles +// several component chunks together, emitted as +// `[mergedChunkFilename, componentChunkFilenames, componentChunkSizes]`. +export type Chunk = + | string + | [ + /* merged chunk filename */ string, + /* component chunk filenames */ Array, + /* component chunk sizes */ Array, + ]; + export type ImportManifestEntry = { id: string, - // chunks is an array of filenames - chunks: Array, + chunks: Array, name: string, async?: boolean, }; @@ -20,11 +30,11 @@ export type ImportManifestEntry = { export type ImportMetadata = | [ /* id */ string, - /* chunk filenames */ Array, + /* chunks */ Array, /* name */ string, /* async */ 1, ] - | [/* id */ string, /* chunk filenames */ Array, /* name */ string]; + | [/* id */ string, /* chunks */ Array, /* name */ string]; export const ID = 0; export const CHUNKS = 1; diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js index 04dcd6356176..72d5894aaa24 100644 --- a/scripts/flow/environment.js +++ b/scripts/flow/environment.js @@ -146,7 +146,11 @@ declare const __webpack_require__: ((id: string) => any) & { u: string => string, }; -declare function __turbopack_load_by_url__(id: string): Promise; +// A chunk id is a plain filename, or a merged chunk emitted as +// `[mergedChunkFilename, componentChunkFilenames, componentChunkSizes]`. +declare function __turbopack_load_by_url__( + id: string | [string, Array, Array], +): Promise; declare const __turbopack_require__: ((id: string) => any) & { u: string => string, };