fix: avoid client modules while traversing dependencies to prevent FOUC during dev (#14577)

* fix: avoid client modules while traversing dependencies to prevent FOUC during dev

This tweaks the way we're traversing dependencies to avoid a flash of unstyled content during dev. Previously we were using `getModuleByURL` which loads both the client and server version of the module. This means that server-only dependencies can end up being loaded into the client module graph, which is more likely to happen with remote modules.

Example:
+page.svelte -> foo.remote.ts -> {client: nothing, server: server-only-dependency } -> getModuleByURL for both client and server of server-only dependency -> crash

I'm not totally sure if this may have been a somewhat hidden breaking change from Vite 5 -> 6, but either way this ensures that Vite 5-7 now only load the ssr variant.

Fixes #14519

* snake_case

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

.changeset/late-banks-clean.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: avoid client modules while traversing dependencies to prevent FOUC during dev

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

@@ -234,7 +234,7 @@ export async function dev(vite, vite_config, svelte_config, get_remotes) {
 						// in dev we inline all styles to avoid FOUC. this gets populated lazily so that
 						// components/stylesheets loaded via import() during `load` are included
 						result.inline_styles = async () => {
-							/** @type {Set<import('vite').ModuleNode>} */
+							/** @type {Set<import('vite').ModuleNode | import('vite').EnvironmentModuleNode>} */
 							const deps = new Set();
 
 							for (const module_node of module_nodes) {
@@ -610,16 +610,16 @@ function remove_static_middlewares(server) {
 
 /**
  * @param {import('vite').ViteDevServer} vite
- * @param {import('vite').ModuleNode} node
- * @param {Set<import('vite').ModuleNode>} deps
+ * @param {import('vite').ModuleNode | import('vite').EnvironmentModuleNode} node
+ * @param {Set<import('vite').ModuleNode | import('vite').EnvironmentModuleNode>} deps
  */
 async function find_deps(vite, node, deps) {
 	// since `ssrTransformResult.deps` contains URLs instead of `ModuleNode`s, this process is asynchronous.
 	// instead of using `await`, we resolve all branches in parallel.
 	/** @type {Promise<void>[]} */
 	const branches = [];
 
-	/** @param {import('vite').ModuleNode} node */
+	/** @param {import('vite').ModuleNode | import('vite').EnvironmentModuleNode} node */
 	async function add(node) {
 		if (!deps.has(node)) {
 			deps.add(node);
@@ -629,20 +629,23 @@ async function find_deps(vite, node, deps) {
 
 	/** @param {string} url */
 	async function add_by_url(url) {
-		const node = await vite.moduleGraph.getModuleByUrl(url);
+		const node = await get_server_module_by_url(vite, url);
 
 		if (node) {
 			await add(node);
 		}
 	}
 
-	if (node.ssrTransformResult) {
-		if (node.ssrTransformResult.deps) {
-			node.ssrTransformResult.deps.forEach((url) => branches.push(add_by_url(url)));
+	const transform_result =
+		/** @type {import('vite').ModuleNode} */ (node).ssrTransformResult || node.transformResult;
+
+	if (transform_result) {
+		if (transform_result.deps) {
+			transform_result.deps.forEach((url) => branches.push(add_by_url(url)));
 		}
 
-		if (node.ssrTransformResult.dynamicDeps) {
-			node.ssrTransformResult.dynamicDeps.forEach((url) => branches.push(add_by_url(url)));
+		if (transform_result.dynamicDeps) {
+			transform_result.dynamicDeps.forEach((url) => branches.push(add_by_url(url)));
 		}
 	} else {
 		node.importedModules.forEach((node) => branches.push(add(node)));
@@ -651,6 +654,16 @@ async function find_deps(vite, node, deps) {
 	await Promise.all(branches);
 }
 
+/**
+ * @param {import('vite').ViteDevServer} vite
+ * @param {string} url
+ */
+function get_server_module_by_url(vite, url) {
+	return vite.environments
+		? vite.environments.ssr.moduleGraph.getModuleByUrl(url)
+		: vite.moduleGraph.getModuleByUrl(url, true);
+}
+
 /**
  * Determine if a file is being requested with the correct case,
  * to ensure consistent behaviour between dev and prod and across