Use import instead of require

Author: lukesandberg

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

@@ -143,23 +143,40 @@ function loadChunkPath(chunkPath: ChunkPath, source?: SourceInfo): void {
   }
 }
 
-function loadChunkUncached(chunkPath: ChunkPath) {
+async function loadChunkAsyncUncached(
+  source: SourceInfo,
+  chunkPath: ChunkPath
+): Promise<void> {
   // resolve to an absolute path to simplify `require` handling
   const resolved = path.resolve(RUNTIME_ROOT, chunkPath)
 
-  const chunkModules: CompressedModuleFactories = require(resolved)
-  for (const [moduleId, moduleFactory] of Object.entries(chunkModules)) {
-    if (!moduleFactories[moduleId]) {
-      if (Array.isArray(moduleFactory)) {
-        const [moduleFactoryFn, otherIds] = moduleFactory
-        moduleFactories[moduleId] = moduleFactoryFn
-        for (const otherModuleId of otherIds) {
-          moduleFactories[otherModuleId] = moduleFactoryFn
+  try {
+    // The chunk we are loading is a CJS module, when importing it via import()
+    // the module.exports become the `default` property of the esm module
+    // namespace.
+    const chunkModules: CompressedModuleFactories = (await import(resolved))
+      .default
+    for (const [moduleId, moduleFactory] of Object.entries(chunkModules)) {
+      if (!moduleFactories[moduleId]) {
+        if (Array.isArray(moduleFactory)) {
+          const [moduleFactoryFn, otherIds] = moduleFactory
+          moduleFactories[moduleId] = moduleFactoryFn
+          for (const otherModuleId of otherIds) {
+            moduleFactories[otherModuleId] = moduleFactoryFn
+          }
+        } else {
+          moduleFactories[moduleId] = moduleFactory
         }
-      } else {
-        moduleFactories[moduleId] = moduleFactory
       }
     }
+  } catch (e) {
+    let errorMessage = `Failed to load chunk ${chunkPath}`
+    if (source) {
+      errorMessage += ` from ${stringifySourceInfo(source)}`
+    }
+    throw new Error(errorMessage, {
+      cause: e,
+    })
   }
 }
 
@@ -176,23 +193,11 @@ function loadChunkAsync(
 
   let entry = chunkCache.get(chunkPath)
   if (entry === undefined) {
-    try {
-      // Load the chunk synchronously
-      loadChunkUncached(chunkPath)
-      entry = loadedChunk
-    } catch (e) {
-      let errorMessage = `Failed to load chunk ${chunkPath}`
-      if (source) {
-        errorMessage += ` from ${stringifySourceInfo(source)}`
-      }
-
-      // Cache the failure promise, future requests will also get this same rejection
-      entry = Promise.reject(
-        new Error(errorMessage, {
-          cause: e,
-        })
-      )
-    }
+    // 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(
+      () => void chunkCache.set(chunkPath, loadedChunk)
+    )
     chunkCache.set(chunkPath, entry)
   }
   // TODO: Return an instrumented Promise that React can use instead of relying on referential equality.