_Really_ don't inline dynamic imports (#946)

Author: penalosa

.changeset/nervous-balloons-rule.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+chore: Extract module name in dynamic imports so that esbuild doesn't minify them

packages/next-on-pages/templates/_worker.js/utils/cache.ts

@@ -1,5 +1,6 @@
 import type { CacheAdaptor, IncrementalCacheValue } from '../../cache';
 import { SUSPENSE_CACHE_URL } from '../../cache';
+import { doImport } from './doImport';
 
 // https://github.com/vercel/next.js/blob/48a566bc/packages/next/src/server/lib/incremental-cache/fetch-cache.ts#L19
 const CACHE_TAGS_HEADER = 'x-vercel-cache-tags';
@@ -118,7 +119,7 @@ async function getInternalCacheAdaptor(
 	type: 'kv' | 'cache-api',
 ): Promise<CacheAdaptor> {
 	const moduleName = `./__next-on-pages-dist__/cache/${type}.js`;
-	const adaptor = await import(moduleName);
+	const adaptor = await doImport(moduleName);
 	return new adaptor.default();
 }
 

packages/next-on-pages/templates/_worker.js/utils/doImport.ts

@@ -0,0 +1,8 @@
+/**
+ * Newer versions of esbuild try to resolve dynamic imports by crawling the filesystem for matching modules.
+ * This doesn't work with the code next-on-pages generates, because the modules don't necessarily exist on the filesystem.
+ * This forces esbuild _not_ to look for matching modules on the filesystem (because esbuild doesn't inline functions when minifying)
+ */
+export async function doImport(m: string) {
+	return import(m);
+}

packages/next-on-pages/templates/_worker.js/utils/fetch.ts

@@ -1,4 +1,5 @@
 import { handleSuspenseCacheRequest } from './cache';
+import { doImport } from './doImport';
 
 /**
  * Patches the global fetch in ways necessary for Next.js (/next-on-pages) applications
@@ -50,7 +51,7 @@ async function handleInlineAssetRequest(request: Request) {
 		try {
 			const url = new URL(request.url);
 			const moduleName = `./__next-on-pages-dist__/assets/${url.pathname}.bin`;
-			const binaryContent = (await import(moduleName)).default;
+			const binaryContent = (await doImport(moduleName)).default;
 
 			// Note: we can't generate a real Response object here because this fetch might be called
 			//       at the top level of a dynamically imported module, and such cases produce the following