add regression test and fix extra scenario

Author: james-elicx

.changeset/five-gifts-hope.md

@@ -2,4 +2,11 @@
 "@opennextjs/cloudflare": patch
 ---
 
-Dynamically discover Turbopack external module mappings from `.next/node_modules/` symlinks instead of using a static import rule. This fixes runtime failures on workerd for packages listed in `serverExternalPackages` that Turbopack externalizes with hashed identifiers.
+Fix Turbopack external module resolution on workerd by dynamically discovering external imports at build time.
+
+When packages are listed in `serverExternalPackages`, Turbopack externalizes them via `externalImport()` which uses dynamic `await import(id)`. On workerd, the bundler can't statically analyze `import(id)` with a variable, so these modules aren't included in the worker bundle.
+
+This patch:
+- Discovers hashed Turbopack external module mappings from `.next/node_modules/` symlinks (e.g. `shiki-43d062b67f27bbdc` → `shiki`)
+- Scans traced chunk files for bare external imports (e.g. `externalImport("shiki")`) and subpath imports (e.g. `shiki/engine/javascript`)
+- Generates explicit `switch/case` entries so the bundler can statically resolve and include these modules

examples/e2e/app-router/app/api/shiki/route.ts

@@ -0,0 +1,19 @@
+import { createHighlighter } from "shiki";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+
+export async function GET() {
+	const highlighter = await createHighlighter({
+		themes: ["vitesse-dark"],
+		langs: ["javascript"],
+		engine: createJavaScriptRegexEngine(),
+	});
+
+	const html = highlighter.codeToHtml('console.log("hello")', {
+		lang: "javascript",
+		theme: "vitesse-dark",
+	});
+
+	return new Response(JSON.stringify({ html }), {
+		headers: { "content-type": "application/json" },
+	});
+}

examples/e2e/app-router/e2e/shiki.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from "@playwright/test";
+
+// Regression test for Turbopack external module resolution on workerd.
+// When shiki is in serverExternalPackages, Turbopack externalizes it via `externalImport()`,
+// which does `await import("shiki")` with a dynamic variable. On workerd, the bundler can't
+// statically analyze `import(id)`, so the module isn't included. The patch adds explicit
+// switch cases (e.g. `case "shiki": await import("shiki")`) so the bundler can trace them.
+// This also covers subpath imports like "shiki/engine/javascript".
+test("shiki syntax highlighting via API route", async ({ request }) => {
+	const response = await request.get("/api/shiki");
+	expect(response.status()).toEqual(200);
+
+	const json = await response.json();
+	expect(json).toMatchObject({
+		html: '<pre class="shiki vitesse-dark" style="background-color:#121212;color:#dbd7caee" tabindex="0"><code><span class="line"><span style="color:#BD976A">console</span><span style="color:#666666">.</span><span style="color:#80A665">log</span><span style="color:#666666">(</span><span style="color:#C98A7D77">"</span><span style="color:#C98A7D">hello</span><span style="color:#C98A7D77">"</span><span style="color:#666666">)</span></span></code></pre>',
+	});
+});

examples/e2e/app-router/next.config.ts

@@ -4,6 +4,7 @@ const nextConfig: NextConfig = {
 	poweredByHeader: false,
 	cleanDistDir: true,
 	transpilePackages: ["@example/shared"],
+	serverExternalPackages: ["shiki"],
 	output: "standalone",
 	// outputFileTracingRoot: "../sst",
 	typescript: {

examples/e2e/app-router/package.json

@@ -21,7 +21,8 @@
 		"@example/shared": "workspace:*",
 		"next": "catalog:e2e",
 		"react": "catalog:e2e",
-		"react-dom": "catalog:e2e"
+		"react-dom": "catalog:e2e",
+		"shiki": "^3.22.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "catalog:",

packages/cloudflare/src/cli/build/patches/plugins/turbopack.ts

@@ -86,6 +86,18 @@ function buildExternalImportRule(mappings: Map<string, string>, tracedFiles: str
       break;`);
 	}
 
+	// Discover bare external imports from chunk files (e.g. externalImport("shiki")).
+	// These need explicit switch cases so the bundler can statically resolve them.
+	const bareImports = discoverBareExternalImports(tracedFiles);
+	const alreadyCased = new Set(cases.map((c) => c.match(/case "([^"]+)"/)?.[1]).filter(Boolean));
+	for (const [moduleName, realName] of bareImports) {
+		if (!alreadyCased.has(moduleName)) {
+			cases.push(`    case "${moduleName}":
+      $RAW = await import("${realName}");
+      break;`);
+		}
+	}
+
 	return `
 rule:
   pattern: "$RAW = await import($ID)"
@@ -102,6 +114,40 @@ ${cases.join("\n")}
 `;
 }
 
+/**
+ * Scan traced chunk files for bare external module imports (e.g. `externalImport("shiki")`).
+ *
+ * In some Turbopack versions, externalized packages are referenced by their real names
+ * (not hashed). On workerd, the default `await import(id)` with a variable `id` can't be
+ * statically analyzed by the bundler. By adding explicit switch cases with string literals,
+ * we make these imports statically discoverable so they get bundled into the worker.
+ */
+function discoverBareExternalImports(tracedFiles: string[]): Map<string, string> {
+	const bareImports = new Map<string, string>();
+
+	// Turbopack compiles `externalImport(id)` calls as `.y("moduleName")` in chunks.
+	// We scan all chunk files (not just [externals] ones) to find these patterns.
+	const chunkFiles = tracedFiles.filter((f) => f.includes(".next/server/chunks/"));
+
+	for (const filePath of chunkFiles) {
+		try {
+			const content = fs.readFileSync(filePath, "utf-8");
+			// Match patterns like .y("shiki") or .y("some-package/subpath")
+			for (const match of content.matchAll(/\.y\("([^"]+)"\)/g)) {
+				const moduleName = match[1];
+				if (moduleName) {
+					// Identity mapping — the module name is already the real name
+					bareImports.set(moduleName, moduleName);
+				}
+			}
+		} catch {
+			// skip files we can't read
+		}
+	}
+
+	return bareImports;
+}
+
 /**
  * Scan traced chunk files for external module subpath imports.
  * E.g. find "shiki-43d062b67f27bbdc/wasm" in chunk code and map it to "shiki/wasm".