fix: externalize transitive deps during dev ssr (#289)

* fix: externalize transitive cjs only deps during dev ssr

* fix: kindly tell ts we know about ssr

* fix: move generating external

* fix: unconditionally externalize all transitive deps of svelte libraries during dev

* fix: omit dependencies present in noExternal or already in external from generated list of externals

* fix: formatting and null checks

* chore: tidy up

Author: dominikg

.changeset/cold-pumpkins-enjoy.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+improve handling of transitive cjs dependencies of svelte libraries during dev ssr

packages/vite-plugin-svelte/src/index.ts

@@ -55,7 +55,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 			// @ts-expect-error temporarily lend the options variable until fixed in configResolved
 			options = await preResolveOptions(inlineOptions, config, configEnv);
 			// extra vite config
-			const extraViteConfig = buildExtraViteConfig(options, config, configEnv);
+			const extraViteConfig = buildExtraViteConfig(options, config);
 			log.debug('additional vite config', extraViteConfig);
 			return extraViteConfig;
 		},

packages/vite-plugin-svelte/src/utils/options.ts

@@ -184,8 +184,7 @@ function resolveViteRoot(viteConfig: UserConfig): string | undefined {
 
 export function buildExtraViteConfig(
 	options: PreResolvedOptions,
-	config: UserConfig,
-	configEnv: ConfigEnv
+	config: UserConfig
 ): Partial<UserConfig> {
 	// extra handling for svelte dependencies in the project
 	const svelteDeps = findRootSvelteDependencies(options.root);
@@ -200,7 +199,7 @@ export function buildExtraViteConfig(
 		// knownJsSrcExtensions: options.extensions
 	};
 
-	if (configEnv.command === 'serve') {
+	if (options.isServe) {
 		extraViteConfig.optimizeDeps = buildOptimizeDepsForSvelte(
 			svelteDeps,
 			options,
@@ -209,7 +208,7 @@ export function buildExtraViteConfig(
 	}
 
 	// @ts-ignore
-	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, options, config);
+	extraViteConfig.ssr = buildSSROptionsForSvelte(svelteDeps, options, config, extraViteConfig);
 
 	return extraViteConfig;
 }
@@ -294,7 +293,7 @@ function buildSSROptionsForSvelte(
 	// add svelte to ssr.noExternal unless it is present in ssr.external
 	// so we can resolve it with svelte/ssr
 	if (options.isBuild && config.build?.ssr) {
-		// @ts-ignore
+		// @ts-expect-error ssr still flagged in vite
 		if (!config.ssr?.external?.includes('svelte')) {
 			noExternal.push('svelte');
 		}
@@ -309,13 +308,30 @@ function buildSSROptionsForSvelte(
 	// add svelte dependencies to ssr.noExternal unless present in ssr.external or optimizeDeps.include
 	noExternal.push(
 		...Array.from(new Set(svelteDeps.map((s) => s.name))).filter((x) => {
-			// @ts-ignore
+			// @ts-expect-error ssr still flagged in vite
 			return !config.ssr?.external?.includes(x) && !config.optimizeDeps?.include?.includes(x);
 		})
 	);
-	return {
+	const ssr = {
 		noExternal
 	};
+
+	if (options.isServe) {
+		// during dev, we have to externalize transitive dependencies, see https://github.com/sveltejs/vite-plugin-svelte/issues/281
+		// @ts-expect-error ssr still flagged in vite
+		ssr.external = Array.from(
+			new Set(svelteDeps.flatMap((dep) => Object.keys(dep.pkg.dependencies || {})))
+		).filter(
+			(dep) =>
+				!ssr.noExternal.includes(dep) &&
+				// @ts-expect-error ssr still flagged in vite
+				!config.ssr?.noExternal?.includes(dep) &&
+				// @ts-expect-error ssr still flagged in vite
+				!config.ssr?.external?.includes(dep)
+		);
+	}
+
+	return ssr;
 }
 
 export function patchResolvedViteConfig(viteConfig: ResolvedConfig, options: ResolvedOptions) {