fix(astro): include styles in custom 500 error pages (#14488)

olcanebrem · florian-lefebvre · web-flow · commit badc9292a702 · 2025-10-08T09:07:00.000+02:00
Co-authored-by: Florian Lefebvre &lt;contact@florian-lefebvre.dev&gt;
diff --git a/.changeset/shaggy-chairs-sing.md b/.changeset/shaggy-chairs-sing.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes a case where styles on the custom 500 error page would not be included
diff --git a/packages/astro/src/core/build/page-data.ts b/packages/astro/src/core/build/page-data.ts
@@ -29,7 +29,8 @@ export function collectPagesData(opts: CollectPagesDataOptions): CollectPagesDat
 	// and is then cached across all future SSR builds. In the past, we've had trouble
 	// with parallelized builds without guaranteeing that this is called first.
 	for (const route of manifest.routes) {
-		// There's special handling in SSR
+		// There's special handling in SSR for default components like 404
+		// However, we need to include 500 pages so they can be properly built with their styles
 		if (DEFAULT_COMPONENTS.some((component) => route.component === component)) {
 			continue;
 		}
diff --git a/packages/astro/src/core/build/plugins/plugin-ssr.ts b/packages/astro/src/core/build/plugins/plugin-ssr.ts
@@ -91,9 +91,9 @@ function vitePluginSSR(
 						imports.push(`const ${variable} = () => import("${virtualModuleName}");`);
 
 						const pageData2 = internals.pagesByKeys.get(pageData.key);
-						if (pageData2) {
-							pageMap.push(`[${JSON.stringify(pageData2.component)}, ${variable}]`);
-						}
+						// Always add to pageMap even if pageData2 is missing from internals
+						// This ensures error pages like 500.astro are included in the build
+						pageMap.push(`[${JSON.stringify(pageData2?.component || pageData.component)}, ${variable}]`);
 						i++;
 					}
 				}
diff --git a/packages/astro/test/custom-500.test.js b/packages/astro/test/custom-500.test.js
@@ -137,5 +137,29 @@ describe('Custom 500', () => {
 			const html = await response.text();
 			assert.equal(html, '');
 		});
+
+		it('renders custom 500 with styles', async () => {
+			fixture = await loadFixture({
+				root: './fixtures/custom-500/',
+				output: 'server',
+				adapter: testAdapter(),
+			});
+			await fixture.build();
+			app = await fixture.loadTestAdapterApp();
+
+			const request = new Request('http://example.com/');
+			const response = await app.render(request);
+			assert.equal(response.status, 500);
+
+			const html = await response.text();
+			const $ = cheerio.load(html);
+
+			// Check that styles from 500.astro are included
+			// Note: Colors are minified (#ffcccc -> #fcc, #cc0000 -> #c00)
+			const styles = $('style').text();
+			assert.match(styles, /background-color.*#fcc/);
+			assert.match(styles, /color.*#c00/);
+			assert.match(styles, /font-family.*monospace/);
+		});
 	});
 });
diff --git a/packages/astro/test/fixtures/custom-500/src/pages/500.astro b/packages/astro/test/fixtures/custom-500/src/pages/500.astro
@@ -9,6 +9,15 @@ const { error } = Astro.props
 <html lang="en">
 <head>
   <title>Server error - Custom 500</title>
+  <style>
+    body {
+      background-color: #ffcccc;
+      color: #cc0000;
+    }
+    h1 {
+      font-family: monospace;
+    }
+  </style>
 </head>
 <body>
   <h1>Server error</h1>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"astro": patch
 +---
++
 +Fixes a case where styles on the custom 500 error page would not be included
Original file line number	Diff line number	Diff line change
`@@ -91,9 +91,9 @@ function vitePluginSSR(`
`91`	`91`	imports.push(`const ${variable} = () => import("${virtualModuleName}");`);
`92`	`92`
`93`	`93`	`const pageData2 = internals.pagesByKeys.get(pageData.key);`
`94`		`- if (pageData2) {`
`95`		- pageMap.push(`[${JSON.stringify(pageData2.component)}, ${variable}]`);
`96`		`- }`
	`94`	`+ // Always add to pageMap even if pageData2 is missing from internals`
	`95`	`+ // This ensures error pages like 500.astro are included in the build`
	`96`	+ pageMap.push(`[${JSON.stringify(pageData2?.component \|\| pageData.component)}, ${variable}]`);
`97`	`97`	`i++;`
`98`	`98`	`}`
`99`	`99`	`}`