fix: use correct environment file for rendering spa fallback page (#1…

…0963)

Co-authored-by: Tee Ming <chewteeming01@gmail.com>

.changeset/slow-olives-mix.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: use correct environment file for rendering spa fallback page

packages/adapter-static/test/apps/spa/.env.production

@@ -0,0 +1 @@
+PUBLIC_VALUE="a .env.production variable should NOT be included in a mode=staging build"

packages/adapter-static/test/apps/spa/.env.staging

@@ -0,0 +1 @@
+PUBLIC_VALUE=42

packages/adapter-static/test/apps/spa/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build --mode staging",
 		"preview": "sirv -p 5173 -s 200.html build",
 		"test": "playwright test"
 	},

packages/adapter-static/test/apps/spa/src/routes/fallback/[...rest]/+page.svelte

@@ -1 +1,7 @@
+<script>
+	import { env } from '$env/dynamic/public';
+</script>
+
 <h1>the fallback page was rendered</h1>
+
+<b>{env.PUBLIC_VALUE}</b>

packages/adapter-static/test/apps/spa/test/test.js

@@ -27,3 +27,8 @@ test('renders error page for missing page', async ({ page }) => {
 	await page.goto('/nosuchpage');
 	expect(await page.textContent('h1')).toEqual('404');
 });
+
+test('uses correct environment variables for fallback page (mode = staging)', async ({ page }) => {
+	await page.goto('/fallback/x/y/z');
+	expect(await page.textContent('b')).toEqual('42');
+});

packages/kit/src/core/adapt/builder.js

@@ -24,6 +24,7 @@ const extensions = ['.html', '.js', '.mjs', '.json', '.css', '.svg', '.xml', '.w
  *   prerendered: import('types').Prerendered;
  *   prerender_map: import('types').PrerenderMap;
  *   log: import('types').Logger;
+ *   vite_config: import('vite').ResolvedConfig;
  * }} opts
  * @returns {import('@sveltejs/kit').Builder}
  */
@@ -34,7 +35,8 @@ export function create_builder({
 	route_data,
 	prerendered,
 	prerender_map,
-	log
+	log,
+	vite_config
 }) {
 	/** @type {Map<import('@sveltejs/kit').RouteDefinition, import('types').RouteData>} */
 	const lookup = new Map();
@@ -144,7 +146,7 @@ export function create_builder({
 
 		async generateFallback(dest) {
 			const manifest_path = `${config.kit.outDir}/output/server/manifest-full.js`;
-			const env = get_env(config.kit.env, 'production');
+			const env = get_env(config.kit.env, vite_config.mode);
 
 			const fallback = await generate_fallback({
 				manifest_path,

packages/kit/src/core/adapt/index.js

@@ -8,8 +8,17 @@ import { create_builder } from './builder.js';
  * @param {import('types').Prerendered} prerendered
  * @param {import('types').PrerenderMap} prerender_map
  * @param {import('types').Logger} log
+ * @param {import('vite').ResolvedConfig} vite_config
  */
-export async function adapt(config, build_data, server_metadata, prerendered, prerender_map, log) {
+export async function adapt(
+	config,
+	build_data,
+	server_metadata,
+	prerendered,
+	prerender_map,
+	log,
+	vite_config
+) {
 	const { name, adapt } = config.kit.adapter;
 
 	console.log(colors.bold().cyan(`\n> Using ${name}`));
@@ -21,8 +30,10 @@ export async function adapt(config, build_data, server_metadata, prerendered, pr
 		route_data: build_data.manifest_data.routes.filter((route) => route.page || route.endpoint),
 		prerendered,
 		prerender_map,
-		log
+		log,
+		vite_config
 	});
+
 	await adapt(builder);
 
 	log.success('done');

packages/kit/src/exports/vite/index.js

@@ -807,7 +807,15 @@ function kit({ svelte_config }) {
 
 					if (kit.adapter) {
 						const { adapt } = await import('../../core/adapt/index.js');
-						await adapt(svelte_config, build_data, metadata, prerendered, prerender_map, log);
+						await adapt(
+							svelte_config,
+							build_data,
+							metadata,
+							prerendered,
+							prerender_map,
+							log,
+							vite_config
+						);
 					} else {
 						console.log(colors.bold().yellow('\nNo adapter specified'));