[turbopack] Return cached Promise from __turbopack_load_by_url__

packages/next/src/server/dev/hot-reloader-turbopack.ts

@@ -346,6 +346,13 @@ export async function createHotReloaderTurbopack(
       p.startsWith('server/app')
     )
 
+    // Edge uses the browser runtime which already disposes chunks individually.
+    // TODO: process.env.NEXT_RUNTIME is 'nodejs' even though Node.js runtime is not used.
+    if ('__turbopack_clear_chunk_cache__' in globalThis) {
+      ;(globalThis as any).__turbopack_clear_chunk_cache__()
+    }
+
+    // TODO: Stop re-evaluating React Client once it relies on Turbopack's chunk cache.
     if (hasAppPaths) {
       deleteFromRequireCache(
         require.resolve(

turbopack/crates/turbopack-ecmascript-runtime/js/src/browser/runtime/base/runtime-base.ts

@@ -193,35 +193,43 @@ async function loadChunk(
   return promise
 }
 
-async function loadChunkByUrl(source: SourceInfo, chunkUrl: ChunkUrl) {
-  try {
-    await BACKEND.loadChunk(chunkUrl, source)
-  } catch (error) {
-    let loadReason
-    switch (source.type) {
-      case SourceType.Runtime:
-        loadReason = `as a runtime dependency of chunk ${source.chunkPath}`
-        break
-      case SourceType.Parent:
-        loadReason = `from module ${source.parentId}`
-        break
-      case SourceType.Update:
-        loadReason = 'from an HMR update'
-        break
-      default:
-        invariant(source, (source) => `Unknown source type: ${source?.type}`)
-    }
-    throw new Error(
-      `Failed to load chunk ${chunkUrl} ${loadReason}${
-        error ? `: ${error}` : ''
-      }`,
-      error
-        ? {
-            cause: error,
-          }
-        : undefined
-    )
+const instrumentedBackendLoadChunks = new WeakMap<Promise<any>, Promise<any>>()
+// Do not make this async. React relies on referential equality of the returned Promise.
+function loadChunkByUrl(source: SourceInfo, chunkUrl: ChunkUrl): Promise<any> {
+  const thenable = BACKEND.loadChunk(chunkUrl, source)
+  let entry = instrumentedBackendLoadChunks.get(thenable)
+  if (entry === undefined) {
+    entry = thenable.catch((error) => {
+      let loadReason
+      switch (source.type) {
+        case SourceType.Runtime:
+          loadReason = `as a runtime dependency of chunk ${source.chunkPath}`
+          break
+        case SourceType.Parent:
+          loadReason = `from module ${source.parentId}`
+          break
+        case SourceType.Update:
+          loadReason = 'from an HMR update'
+          break
+        default:
+          invariant(source, (source) => `Unknown source type: ${source?.type}`)
+      }
+      throw new Error(
+        `Failed to load chunk ${chunkUrl} ${loadReason}${
+          error ? `: ${error}` : ''
+        }`,
+        error
+          ? {
+              cause: error,
+            }
+          : undefined
+      )
+    })
+    // TODO: Free the Promise once it resolves.
+    instrumentedBackendLoadChunks.set(thenable, entry)
   }
+
+  return entry
 }
 
 async function loadChunkPath(

turbopack/crates/turbopack-ecmascript-runtime/js/src/nodejs/runtime.ts

@@ -93,6 +93,13 @@ function loadChunk(chunkData: ChunkData, source?: SourceInfo): void {
 }
 
 const loadedChunks = new Set<ChunkPath>()
+const unsupportedLoadChunk = Promise.resolve(undefined)
+const loadedChunk = Promise.resolve(undefined)
+const chunkCache = new Map<ChunkPath, Promise<any> | null>()
+
+function clearChunkCache() {
+  chunkCache.clear()
+}
 
 function loadChunkPath(chunkPath: ChunkPath, source?: SourceInfo): void {
   if (!isJs(chunkPath)) {
@@ -136,21 +143,10 @@ function loadChunkPath(chunkPath: ChunkPath, source?: SourceInfo): void {
   }
 }
 
-async function loadChunkAsync(
+async function loadChunkAsyncUncached(
   source: SourceInfo,
-  chunkData: ChunkData
-): Promise<any> {
-  const chunkPath = typeof chunkData === 'string' ? chunkData : chunkData.path
-  if (!isJs(chunkPath)) {
-    // We only support loading JS chunks in Node.js.
-    // This branch can be hit when trying to load a CSS chunk.
-    return
-  }
-
-  if (loadedChunks.has(chunkPath)) {
-    return
-  }
-
+  chunkPath: ChunkPath
+): Promise<void> {
   const resolved = path.resolve(RUNTIME_ROOT, chunkPath)
 
   try {
@@ -187,7 +183,6 @@ async function loadChunkAsync(
         }
       }
     }
-    loadedChunks.add(chunkPath)
   } catch (e) {
     let errorMessage = `Failed to load chunk ${chunkPath}`
 
@@ -201,7 +196,30 @@ async function loadChunkAsync(
   }
 }
 
-async function loadChunkAsyncByUrl(source: SourceInfo, chunkUrl: string) {
+function loadChunkAsync(
+  source: SourceInfo,
+  chunkData: ChunkData
+): Promise<any> {
+  const chunkPath = typeof chunkData === 'string' ? chunkData : chunkData.path
+  if (!isJs(chunkPath)) {
+    // We only support loading JS chunks in Node.js.
+    // This branch can be hit when trying to load a CSS chunk.
+    return unsupportedLoadChunk
+  }
+
+  let entry = chunkCache.get(chunkPath)
+  if (entry === undefined) {
+    const resolve = chunkCache.set.bind(chunkCache, chunkPath, null)
+    // A new Promise ensures callers that don't handle rejection will still trigger one unhandled rejection.
+    // Handling the rejection will not trigger unhandled rejections.
+    entry = loadChunkAsyncUncached(source, chunkPath).then(resolve)
+    chunkCache.set(chunkPath, entry)
+  }
+  // TODO: Return an instrumented Promise that React can use instead of relying on referential equality.
+  return entry === null ? loadedChunk : entry
+}
+
+function loadChunkAsyncByUrl(source: SourceInfo, chunkUrl: string) {
   const path = url.fileURLToPath(new URL(chunkUrl, RUNTIME_ROOT)) as ChunkPath
   return loadChunkAsync(source, path)
 }
@@ -363,6 +381,9 @@ function isJs(chunkUrlOrPath: ChunkUrl | ChunkPath): boolean {
   return regexJsUrl.test(chunkUrlOrPath)
 }
 
+// For hot-reloader
+;(globalThis as any).__turbopack_clear_chunk_cache__ = clearChunkCache
+
 module.exports = {
   getOrInstantiateRuntimeModule,
   loadChunk,