fix: prerendered favicon handling (#238)

* fix: prerendered favicon handling

* dumb typo

* chore: changeset

.changeset/tame-feet-think.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+Fix the prerendered route handling for favicons.

src/buildApplication/fixPrerenderedRoutes.ts

@@ -78,6 +78,13 @@ async function getRoutePath(
 /**
  * Retrieves the new destination for the prerendered file, if no file already exists.
  *
+ * @example
+ * ```ts
+ * // index.prerender-fallback.html -> index.html
+ * // index.rsc.prerender-fallback.rsc -> index.rsc
+ * // favicon.ico.prerender-fallback.body -> favicon.ico
+ * ```
+ *
  * @param config.fallback Fallback file configuration.
  * @param dirName Directory name to use for the route.
  * @param outputDir Vercel build output directory.
@@ -91,7 +98,7 @@ async function getRouteDest(
 	const destRoute = normalizePath(
 		join(
 			dirName,
-			fallback.fsPath.replace(/(?:\.rsc)?\.prerender-fallback/gi, '')
+			fallback.fsPath.replace(/\.prerender-fallback(?:\.rsc)?(?:\.body)?/gi, '')
 		)
 	);
 	const destFile = join(outputDir, 'static', destRoute);

src/buildApplication/generateFunctionsMap.ts

@@ -1,4 +1,4 @@
-import { readFile, writeFile, mkdir, rm, readdir, copyFile } from 'fs/promises';
+import { readFile, writeFile, mkdir, readdir } from 'fs/promises';
 import { exit } from 'process';
 import { dirname, join, relative, resolve } from 'path';
 import type { Node } from 'acorn';
@@ -143,7 +143,7 @@ async function processDirectoryRecursively(
 			const filepath = join(dir, file);
 			if (await validateDir(filepath)) {
 				const dirResultsPromise = file.endsWith('.func')
-					? processFuncDirectory(setup, file, filepath)
+					? processFuncDirectory(setup, filepath)
 					: processDirectoryRecursively(setup, filepath);
 				const dirResults = await dirResultsPromise;
 				dirResults.invalidFunctions?.forEach(fn => invalidFunctions.add(fn));
@@ -181,7 +181,6 @@ type FunctionConfig = {
 
 async function processFuncDirectory(
 	setup: ProcessingSetup,
-	file: string,
 	filepath: string
 ): Promise<Partial<DirectoryProcessingResults>> {
 	const relativePath = relative(setup.functionsDir, filepath);
@@ -191,10 +190,6 @@ async function processFuncDirectory(
 	);
 
 	if (functionConfig?.runtime !== 'edge') {
-		if (file === 'favicon.ico.func') {
-			await tryToFixFaviconFunc();
-			return {};
-		}
 		return {
 			invalidFunctions: new Set([relativePath]),
 		};
@@ -422,46 +417,6 @@ async function buildWebpackChunkFiles(
 	}
 }
 
-/**
- * Next.js generates a favicon nodejs function instead of providing the favicon as
- * a standard static asset. Since it is not using the edge runtime we can't use the
- * function itself, so this function tries to see if it can find the standard favicon
- * in the .vercel/output/static/static/media/metadata directory generated by Next.js
- * and moves that one in the static output directory instead.
- */
-async function tryToFixFaviconFunc(): Promise<void> {
-	try {
-		const staticMediaMetadata = resolve(
-			'.vercel',
-			'output',
-			'static',
-			'static',
-			'media',
-			'metadata'
-		);
-		const files = await readdir(staticMediaMetadata);
-		const favicon = files.find(file =>
-			/^favicon\.[a-zA-Z0-9]+\.ico$/.test(file)
-		);
-		if (favicon) {
-			const faviconFilePath = join(staticMediaMetadata, favicon);
-			const vercelStaticFavicon = resolve(
-				'.vercel',
-				'output',
-				'static',
-				'favicon.ico'
-			);
-			await copyFile(faviconFilePath, vercelStaticFavicon);
-		}
-		// let's delete the .vercel/output/static/static directory so that extra media
-		// files are not uploaded unnecessarily to Cloudflare Pages
-		const staticStaticDir = resolve('.vercel', 'output', 'static', 'static');
-		await rm(staticStaticDir, { recursive: true, force: true });
-	} catch {
-		cliWarn('Warning: No static favicon file found');
-	}
-}
-
 type ProcessingSetup = {
 	functionsDir: string;
 	distFunctionsDir: string;

tests/_helpers/index.ts

@@ -255,12 +255,13 @@ export function createInvalidFuncDir(data: string) {
  * Create a fake prerender config file for testing.
  *
  * @param path Path name for the file in the build output.
+ * @param ext File extension for the fallback file in the build output.
  * @returns The stringified prerender config file contents.
  */
-export function mockPrerenderConfigFile(path: string): string {
-	const fsPath = path.endsWith('.rsc')
-		? `${path}.prerender-fallback.rsc`
-		: `${path}.prerender-fallback.html`;
+export function mockPrerenderConfigFile(path: string, ext?: string): string {
+	const extension = ext || (path.endsWith('.rsc') ? 'rsc' : 'html');
+	const fsPath = `${path}.prerender-fallback.${extension}`;
+
 	const config: VercelPrerenderConfig = {
 		type: 'Prerender',
 		fallback: {
@@ -270,6 +271,7 @@ export function mockPrerenderConfigFile(path: string): string {
 		},
 		initialHeaders: {
 			...(path.endsWith('.rsc') && { 'content-type': 'text/x-component' }),
+			...(path.endsWith('.ico') && { 'content-type': 'image/x-icon' }),
 			vary: 'RSC, Next-Router-State-Tree, Next-Router-Prefetch',
 		},
 	};

tests/src/buildApplication/generateFunctionsMap.test.ts

@@ -171,6 +171,33 @@ describe('generateFunctionsMap', async () => {
 			});
 		});
 
+		test('succeeds for prerendered favicon', async () => {
+			const { functionsMap, prerenderedRoutes } =
+				await generateFunctionsMapFrom({
+					'page.func': validFuncDir,
+					'page.rsc.func': validFuncDir,
+					'favicon.ico.func': invalidFuncDir,
+					'favicon.ico.prerender-config.json': mockPrerenderConfigFile(
+						'favicon.ico',
+						'body'
+					),
+					'favicon.ico.prerender-fallback.body': 'favicon.ico',
+				});
+
+			expect(functionsMap.size).toEqual(2);
+			expect(functionsMap.get('/page')).toMatch(/\/page\.func\.js$/);
+			expect(functionsMap.get('/page.rsc')).toMatch(/\/page\.rsc\.func\.js$/);
+
+			expect(prerenderedRoutes.size).toEqual(1);
+			expect(prerenderedRoutes.get('/favicon.ico')).toEqual({
+				headers: {
+					'content-type': 'image/x-icon',
+					vary: 'RSC, Next-Router-State-Tree, Next-Router-Prefetch',
+				},
+				overrides: [],
+			});
+		});
+
 		test('succeeds for nested prerendered routes', async () => {
 			const { functionsMap, prerenderedRoutes } =
 				await generateFunctionsMapFrom({