fix: remove dynamic require for map file (#347)

Author: vicb

.changeset/warm-apricots-explain.md

@@ -0,0 +1,8 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+fix: remove dynamic require for map file
+
+ESBuild tries to load all files in the chunks folder with `require("./chunks/" + var)`.
+This is an error when the folder contains map file.

examples/api/next.config.mjs

@@ -3,6 +3,11 @@ import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
 initOpenNextCloudflareForDev();
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    // Generate source map to validate the fix for opennextjs/opennextjs-cloudflare#341
+    serverSourceMaps: true,
+  },
+};
 
 export default nextConfig;

packages/cloudflare/src/cli/build/patches/investigated/update-webpack-chunks-file/get-file-content-with-updated-webpack-f-require-code.test.ts

@@ -17,10 +17,11 @@ describe("getFileContentWithUpdatedWebpackFRequireCode", () => {
       { installChunk: "installChunk", installedChunks: "installedChunks" },
       ["658"]
     );
-    expect(unstyleCode(updatedFCode)).toContain(`if (installedChunks[chunkId]) return;`);
+    expect(unstyleCode(updatedFCode)).toContain(`if (installedChunks[chunkId]) { return; }`);
     expect(unstyleCode(updatedFCode)).toContain(
-      `if (chunkId === 658) return installChunk(require("./chunks/658.js"));`
+      `if (chunkId === 658) { return installChunk(require("./chunks/658.js")); }`
     );
+    expect(unstyleCode(updatedFCode)).not.toContain(`require("./chunks/" +`);
   });
 
   test("returns the updated content of the f.require function from minified webpack runtime code", async () => {
@@ -34,8 +35,9 @@ describe("getFileContentWithUpdatedWebpackFRequireCode", () => {
       { installChunk: "r", installedChunks: "e" },
       ["658"]
     );
-    expect(unstyleCode(updatedFCode)).toContain("if (e[o]) return;");
-    expect(unstyleCode(updatedFCode)).toContain(`if (o === 658) return r(require("./chunks/658.js"));`);
+    expect(unstyleCode(updatedFCode)).toContain("if (e[o]) { return; }");
+    expect(unstyleCode(updatedFCode)).toContain(`if (o === 658) { return r(require("./chunks/658.js")); }`);
+    expect(unstyleCode(updatedFCode)).not.toContain(`require("./chunks/" +`);
   });
 });
 

packages/cloudflare/src/cli/build/patches/investigated/update-webpack-chunks-file/get-file-content-with-updated-webpack-f-require-code.ts

@@ -81,12 +81,20 @@ export async function getFileContentWithUpdatedWebpackFRequireCode(
 
   const functionBody = webpackFRequireFunction.getBody() as ts.Block;
 
-  functionBody.insertStatements(0, [
-    `if (${installedChunks}[${chunkId}]) return;`,
-    ...chunks.map(
-      (chunk) => `\nif(${chunkId} === ${chunk}) return ${installChunk}(require("./chunks/${chunk}.js"));`
-    ),
-  ]);
+  functionBody.replaceWithText(`
+{
+  if (${installedChunks}[${chunkId}]) {
+    return;
+  }${chunks
+    .map(
+      (chunk) => `
+  if(${chunkId} === ${chunk}) {
+    return ${installChunk}(require("./chunks/${chunk}.js"));
+  }`
+    )
+    .join("")}
+  throw new Error(\`Unknown chunk \${${chunkId}}\`);
+}`);
 
   return sourceFile.print();
 }

packages/cloudflare/src/cli/build/patches/investigated/update-webpack-chunks-file/test-snapshots/minified-webpacks-file.js

@@ -72,11 +72,13 @@
                     e[n[f]] = 1;
             };
             (t.f.require = (o, n) => {
-                if (e[o])
+                if (e[o]) {
                     return;
-                if (o === 658)
+                }
+                if (o === 658) {
                     return r(require("./chunks/658.js"));
-                e[o] || (658 != o ? r(require("./chunks/" + t.u(o))) : (e[o] = 1));
+                }
+                throw new Error(`Unknown chunk ${o}`);
             }),
                 (module.exports = t),
                 (t.C = r);

packages/cloudflare/src/cli/build/patches/investigated/update-webpack-chunks-file/test-snapshots/unminified-webpacks-file.js

@@ -205,21 +205,13 @@
         /******/
         /******/ // require() chunk loading for javascript
         /******/ __webpack_require__.f.require = (chunkId, promises) => {
-            if (installedChunks[chunkId])
+            if (installedChunks[chunkId]) {
                 return;
-            if (chunkId === 658)
+            }
+            if (chunkId === 658) {
                 return installChunk(require("./chunks/658.js"));
-            /******/ // "1" is the signal for "already loaded"
-            /******/ if (!installedChunks[chunkId]) {
-                /******/ if (658 != chunkId) {
-                    /******/ installChunk(require("./chunks/" + __webpack_require__.u(chunkId)));
-                    /******/
-                }
-                else
-                    installedChunks[chunkId] = 1;
-                /******/
             }
-            /******/
+            throw new Error(`Unknown chunk ${chunkId}`);
         };
         /******/
         /******/ module.exports = __webpack_require__;