fix: regression from consolidating dev checks

.changeset/evil-planes-rush.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: resolve the app payload without using `process.env.NODE_ENV`

packages/kit/package.json

@@ -84,9 +84,7 @@
 		"test:server-side-route-resolution:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:server-side-route-resolution:build",
 		"test:svelte-async:dev": "pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:svelte-async:dev",
 		"test:svelte-async:build": "pnpm test:unit && pnpm -r --workspace-concurrency 1 --filter=\"./test/**\" test:svelte-async:build",
-		"test:unit:dev": "vitest --config kit.vitest.config.js run",
-		"test:unit:prod": "NODE_ENV=production vitest --config kit.vitest.config.js run csp.spec.js cookie.spec.js",
-		"test:unit": "pnpm test:unit:dev && pnpm test:unit:prod",
+		"test:unit": "vitest --config kit.vitest.config.js run",
 		"prepublishOnly": "pnpm generate:types",
 		"generate:version": "node scripts/generate-version.js",
 		"generate:types": "node scripts/generate-dts.js"

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

@@ -373,7 +373,8 @@ async function kit({ svelte_config }) {
 					__SVELTEKIT_CLIENT_ROUTING__: s(kit.router.resolution === 'client'),
 					__SVELTEKIT_HASH_ROUTING__: s(kit.router.type === 'hash'),
 					__SVELTEKIT_SERVER_TRACING_ENABLED__: s(kit.experimental.tracing.server),
-					__SVELTEKIT_EXPERIMENTAL_USE_TRANSFORM_ERROR__: s(kit.experimental.handleRenderingErrors)
+					__SVELTEKIT_EXPERIMENTAL_USE_TRANSFORM_ERROR__: s(kit.experimental.handleRenderingErrors),
+					__SVELTEKIT_DEV__: s(!is_build)
 				};
 
 				if (is_build) {

packages/kit/src/runtime/app/server/index.js

@@ -1,6 +1,5 @@
 import { read_implementation, manifest } from '__sveltekit/server';
 import { base } from '$app/paths';
-import { DEV } from 'esm-env';
 import { base64_decode } from '../../utils.js';
 
 /**
@@ -55,7 +54,7 @@ export function read(asset) {
 	}
 
 	const file = decodeURIComponent(
-		DEV && asset.startsWith('/@fs') ? asset : asset.slice(base.length + 1)
+		__SVELTEKIT_DEV__ && asset.startsWith('/@fs') ? asset : asset.slice(base.length + 1)
 	);
 
 	if (file in manifest._.server_assets) {

packages/kit/src/runtime/client/client.js

@@ -658,7 +658,8 @@ async function _preload_code(url) {
  * @param {boolean} hydrate
  */
 async function initialize(result, target, hydrate) {
-	if (DEV && result.state.error && document.querySelector('vite-error-overlay')) return;
+	if (__SVELTEKIT_DEV__ && result.state.error && document.querySelector('vite-error-overlay'))
+		return;
 
 	/** @type {import('@sveltejs/kit').NavigationEvent} */
 	const nav = {
@@ -672,8 +673,11 @@ async function initialize(result, target, hydrate) {
 		nav
 	};
 
-	const style = document.querySelector('style[data-sveltekit]');
-	if (style) style.remove();
+	// Removes the style node we used to avoid FOUC during development
+	if (__SVELTEKIT_DEV__) {
+		const style = document.querySelector('style[data-sveltekit]');
+		if (style) style.remove();
+	}
 
 	update(/** @type {import('@sveltejs/kit').Page} */ (result.props.page));
 

packages/kit/src/runtime/client/remote-functions/prerender.svelte.js

@@ -2,13 +2,12 @@
 import { app_dir, base } from '$app/paths/internal/client';
 import { version } from '__sveltekit/environment';
 import * as devalue from 'devalue';
-import { DEV } from 'esm-env';
 import { app, prerender_responses } from '../client.js';
 import { get_remote_request_headers, remote_request } from './shared.svelte.js';
 import { create_remote_key, stringify_remote_arg } from '../../shared.js';
 
 // Initialize Cache API for prerender functions
-const CACHE_NAME = DEV ? `sveltekit:${Date.now()}` : `sveltekit:${version}`;
+const CACHE_NAME = __SVELTEKIT_DEV__ ? `sveltekit:${Date.now()}` : `sveltekit:${version}`;
 /** @type {Cache | undefined} */
 let prerender_cache;
 

packages/kit/src/runtime/client/remote-functions/query-live.svelte.js

@@ -11,7 +11,6 @@ import {
 } from './shared.svelte.js';
 import * as devalue from 'devalue';
 import { HttpError, Redirect } from '@sveltejs/kit/internal';
-import { DEV } from 'esm-env';
 import { noop, once } from '../../../utils/functions.js';
 import { with_resolvers } from '../../../utils/promise.js';
 import { tick } from 'svelte';
@@ -32,7 +31,7 @@ import { read_ndjson } from '../ndjson.js';
  * @returns {RemoteLiveQueryFunction<any, any>}
  */
 export function query_live(id) {
-	if (DEV) {
+	if (__SVELTEKIT_DEV__) {
 		// If this reruns as part of HMR, refresh the query
 		const entries = live_query_map.get(id);
 

packages/kit/src/runtime/client/remote-functions/query.svelte.js

@@ -10,7 +10,6 @@ import {
 	remote_request
 } from './shared.svelte.js';
 import * as devalue from 'devalue';
-import { DEV } from 'esm-env';
 import { noop } from '../../../utils/functions.js';
 import { with_resolvers } from '../../../utils/promise.js';
 import { tick, untrack } from 'svelte';
@@ -30,7 +29,7 @@ import { create_remote_key, stringify_remote_arg, unfriendly_hydratable } from '
  * @returns {RemoteQueryFunction<any, any>}
  */
 export function query(id) {
-	if (DEV) {
+	if (__SVELTEKIT_DEV__) {
 		// If this reruns as part of HMR, refresh the query
 		const entries = query_map.get(id);
 

packages/kit/src/runtime/client/utils.js

@@ -249,7 +249,7 @@ export const updated_listener = {
 export function create_updated_store() {
 	const { set, subscribe } = writable(false);
 
-	if (DEV || !BROWSER) {
+	if (__SVELTEKIT_DEV__ || !BROWSER) {
 		return {
 			subscribe,
 			// eslint-disable-next-line @typescript-eslint/require-await

packages/kit/src/runtime/server/cookie.spec.js

@@ -1,5 +1,4 @@
-import process from 'node:process';
-import { assert, expect, test, describe } from 'vitest';
+import { assert, expect, test, describe, beforeAll } from 'vitest';
 import { domain_matches, path_matches, get_cookies } from './cookie.js';
 import { installPolyfills } from '@sveltejs/kit/node/polyfills';
 
@@ -38,7 +37,12 @@ const cookies_setup = ({ href, headers } = {}) => {
 	return result;
 };
 
-describe.skipIf(process.env.NODE_ENV === 'production')('cookies in dev', () => {
+describe('cookies in dev', () => {
+	beforeAll(() => {
+		// @ts-expect-error
+		globalThis.__SVELTEKIT_DEV__ = true;
+	});
+
 	test('warns if cookie exceeds 4,129 bytes', () => {
 		try {
 			const { cookies } = cookies_setup();
@@ -51,7 +55,12 @@ describe.skipIf(process.env.NODE_ENV === 'production')('cookies in dev', () => {
 	});
 });
 
-describe.skipIf(process.env.NODE_ENV !== 'production')('cookies in prod', () => {
+describe('cookies in prod', () => {
+	beforeAll(() => {
+		// @ts-expect-error
+		globalThis.__SVELTEKIT_DEV__ = false;
+	});
+
 	domains.positive.forEach(([hostname, constraint]) => {
 		test(`${hostname} / ${constraint}`, () => {
 			assert.ok(domain_matches(hostname, constraint));

packages/kit/src/runtime/server/index.js

@@ -5,7 +5,6 @@ import { IN_WEBCONTAINER } from './constants.js';
 import { respond } from './respond.js';
 import { set_private_env, set_public_env } from '../shared-server.js';
 import { options, get_hooks } from '__SERVER__/internal.js';
-import { DEV } from 'esm-env';
 import { filter_env } from '../../utils/env.js';
 import { format_server_error } from './utils.js';
 import { set_read_implementation, set_manifest } from '__sveltekit/server';
@@ -102,7 +101,7 @@ export class Server {
 			set_read_implementation(wrapped_read);
 		}
 
-		// During DEV and for some adapters this function might be called in quick succession,
+		// During dev and for some adapters this function might be called in quick succession,
 		// so we need to make sure we're not invoking this logic (most notably the init hook) multiple times
 		await (init_promise ??= (async () => {
 			try {
@@ -141,7 +140,7 @@ export class Server {
 					await module.init();
 				}
 			} catch (e) {
-				if (DEV) {
+				if (__SVELTEKIT_DEV__) {
 					this.#options.hooks = {
 						handle: () => {
 							throw e;

packages/kit/src/runtime/server/page/csp.js

@@ -1,4 +1,3 @@
-import { DEV } from 'esm-env';
 import { escape_html } from '../../../utils/escape.js';
 import { sha256 } from './crypto.js';
 
@@ -87,7 +86,7 @@ class BaseProvider {
 	 */
 	constructor(use_hashes, directives, nonce) {
 		this.#use_hashes = use_hashes;
-		this.#directives = DEV ? { ...directives } : directives; // clone in dev so we can safely mutate
+		this.#directives = __SVELTEKIT_DEV__ ? { ...directives } : directives; // clone in dev so we can safely mutate
 
 		const d = this.#directives;
 
@@ -103,7 +102,7 @@ class BaseProvider {
 		const style_src_attr = d['style-src-attr'];
 		const style_src_elem = d['style-src-elem'];
 
-		if (DEV) {
+		if (__SVELTEKIT_DEV__) {
 			// remove strict-dynamic in dev...
 			// TODO reinstate this if we can figure out how to make strict-dynamic work
 			// if (d['default-src']) {
@@ -164,7 +163,7 @@ class BaseProvider {
 
 		this.#script_needs_csp = this.#script_src_needs_csp || this.#script_src_elem_needs_csp;
 		this.#style_needs_csp =
-			!DEV &&
+			!__SVELTEKIT_DEV__ &&
 			(this.#style_src_needs_csp ||
 				this.#style_src_attr_needs_csp ||
 				this.#style_src_elem_needs_csp);

packages/kit/src/runtime/server/page/csp.spec.js

@@ -1,6 +1,5 @@
-import process from 'node:process';
 import { webcrypto } from 'node:crypto';
-import { assert, test, describe } from 'vitest';
+import { assert, beforeAll, test, describe } from 'vitest';
 import { Csp } from './csp.js';
 
 // TODO: remove after bumping peer dependency to require Node 20
@@ -9,7 +8,12 @@ if (!globalThis.crypto) {
 	globalThis.crypto = webcrypto;
 }
 
-describe.skipIf(process.env.NODE_ENV === 'production')('CSPs in dev', () => {
+describe('CSPs in dev', () => {
+	beforeAll(() => {
+		// @ts-expect-error
+		globalThis.__SVELTEKIT_DEV__ = true;
+	});
+
 	test('adds unsafe-inline styles', () => {
 		const csp = new Csp(
 			{
@@ -70,7 +74,12 @@ describe.skipIf(process.env.NODE_ENV === 'production')('CSPs in dev', () => {
 	});
 });
 
-describe.skipIf(process.env.NODE_ENV !== 'production')('CSPs in prod', () => {
+describe('CSPs in prod', () => {
+	beforeAll(() => {
+		// @ts-expect-error
+		globalThis.__SVELTEKIT_DEV__ = false;
+	});
+
 	test('generates blank CSP header', () => {
 		const csp = new Csp(
 			{

packages/kit/src/runtime/server/page/render.js

@@ -302,13 +302,15 @@ export async function render_response({
 		return `${assets}/${path}`;
 	};
 
-	// inline styles can come from `bundleStrategy: 'inline'` or `inlineStyleThreshold`
 	const style = client.inline
 		? client.inline?.style
 		: Array.from(inline_styles.values()).join('\n');
 
 	if (style) {
-		const attributes = DEV ? ['data-sveltekit'] : [];
+		// We always inline all styles to avoid FOUC during development.
+		// Once that's accomplished, we find and remove the style node using the
+		// `data-sveltekit` attribute once CSR kicks in
+		const attributes = __SVELTEKIT_DEV__ ? ['data-sveltekit'] : [];
 		if (csp.style_needs_nonce) attributes.push(`nonce="${csp.nonce}"`);
 		csp.add_style(style);
 		head.add_style(style, attributes);
@@ -605,10 +607,10 @@ export async function render_response({
 		}
 
 		if (options.service_worker) {
-			let opts = DEV ? ", { type: 'module' }" : '';
+			let opts = __SVELTEKIT_DEV__ ? ", { type: 'module' }" : '';
 			if (options.service_worker_options != null) {
 				const service_worker_options = { ...options.service_worker_options };
-				if (DEV) {
+				if (__SVELTEKIT_DEV__) {
 					service_worker_options.type = 'module';
 				}
 				opts = `, ${s(service_worker_options)}`;

packages/kit/src/runtime/server/utils.js

@@ -40,7 +40,7 @@ export function allowed_methods(mod) {
  * @param {import('types').SSROptions} options
  */
 export function get_global_name(options) {
-	return DEV ? '__sveltekit_dev' : `__sveltekit_${options.version_hash}`;
+	return __SVELTEKIT_DEV__ ? '__sveltekit_dev' : `__sveltekit_${options.version_hash}`;
 }
 
 /**
@@ -53,7 +53,7 @@ export function get_global_name(options) {
 export function static_error_page(options, status, message) {
 	let page = options.templates.error({ status, message: escape_html(message) });
 
-	if (DEV) {
+	if (__SVELTEKIT_DEV__) {
 		// inject Vite HMR client, for easier debugging
 		page = page.replace('</head>', '<script type="module" src="/@vite/client"></script></head>');
 	}
@@ -103,7 +103,7 @@ export async function handle_error_and_jsonify(event, state, options, error) {
 		return { message: 'Unknown Error', ...error.body };
 	}
 
-	if (DEV && typeof error == 'object') {
+	if (__SVELTEKIT_DEV__ && typeof error == 'object') {
 		fix_stack_trace(error);
 	}
 

packages/kit/src/types/global-private.d.ts

@@ -3,6 +3,11 @@ declare global {
 	const __SVELTEKIT_APP_DIR__: string;
 	const __SVELTEKIT_APP_VERSION_FILE__: string;
 	const __SVELTEKIT_APP_VERSION_POLL_INTERVAL__: number;
+	/**
+	 * True if the user ran `vite dev`. This is different from `esm-env` because
+	 * it is influenced by `NODE_ENV` which can still be true during `vite preview`
+	 */
+	const __SVELTEKIT_DEV__: boolean;
 	const __SVELTEKIT_EMBEDDED__: boolean;
 	const __SVELTEKIT_PATHS_ASSETS__: string;
 	const __SVELTEKIT_PATHS_BASE__: string;

packages/kit/src/types/internal.d.ts

@@ -469,7 +469,10 @@ export interface SSRNode {
 	universal_id?: string;
 	server_id?: string;
 
-	/** inlined styles */
+	/**
+	 * During development, all styles are inlined for the page to avoid FOUC.
+	 * But in production, this stores styles that are below the inline threshold
+	 */
 	inline_styles?(): MaybePromise<
 		Record<string, string | ((assets: string, base: string) => string)>
 	>;

packages/kit/types/index.d.ts

@@ -2722,7 +2722,10 @@ declare module '@sveltejs/kit' {
 		universal_id?: string;
 		server_id?: string;
 
-		/** inlined styles */
+		/**
+		 * During development, all styles are inlined for the page to avoid FOUC.
+		 * But in production, this stores styles that are below the inline threshold
+		 */
 		inline_styles?(): MaybePromise<
 			Record<string, string | ((assets: string, base: string) => string)>
 		>;