Remove the cache property from calls to new Request(...) in React

Author: james-elicx

.changeset/odd-buses-lay.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+Remove `cache` from React's `new Request(...)` cache.

.changeset/tame-islands-arrive.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+Strip the `cache` property from our patched fetch.

packages/next-on-pages/src/buildApplication/processVercelFunctions/dedupeEdgeFunctions.ts

@@ -491,12 +491,27 @@ function fixFunctionContents(contents: string): string {
 
 	// The workers runtime does not implement `cache` on RequestInit. This is used in Next.js' patched fetch.
 	// Due to this, we remove the `cache` property from those that Next.js adds to RequestInit.
-	// https://github.com/vercel/next.js/blob/269114b5cc583f0c91e687c1aeb61503ef681b91/packages/next/src/server/lib/patch-fetch.ts#L304
+	// https://github.com/vercel/next.js/blob/9ec37c12/packages/next/src/server/lib/patch-fetch.ts#L504
 	contents = contents.replace(
 		/"cache",("credentials","headers","integrity","keepalive","method","mode","redirect","referrer")/gm,
 		'$1',
 	);
 
+	// React's server code creates new Request objects that can contain the `cache` property in RequestInit.
+	// This is not supported on workerd, so we need to replace their ternary statement with a way to strip
+	// the `cache` property from the `RequestInit` object.
+	// https://github.com/vercel/next.js/blob/9ec37c12/packages/next/src/compiled/react/cjs/react.react-server.production.js#L87
+	contents = contents.replace(
+		/([\w$]+) instanceof URL\?new Request\([\w$]+,([\w$]+)\):[\w$]+;/gm,
+		`(() => {
+			if ($1 instanceof URL) {
+				const { cache, ...init } = $2 ?? {};
+				return new Request($1, init);
+			}
+			return $1;
+		})();`,
+	);
+
 	// TODO: Remove once https://github.com/vercel/next.js/issues/58265 is fixed.
 	// This resolves a critical issue in Next.js 14.0.2 that breaks edge runtime rendering due to the assumption
 	// that the the passed internal request is of type `NodeNextRequest` and never `WebNextRequest`.

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

@@ -17,8 +17,11 @@ export function patchFetch(): void {
 function applyPatch() {
 	const originalFetch = globalThis.fetch;
 
-	globalThis.fetch = async (...args) => {
-		const request = new Request(...args);
+	globalThis.fetch = async (input, requestInit) => {
+		// @ts-expect-error - `cache` exists on `RequestInit` in Node.js, but not workerd.
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { cache, ...init } = requestInit ?? {};
+		const request = new Request(input, init);
 
 		let response = await handleInlineAssetRequest(request);
 		if (response) return response;