[fix] enable Vite pre-bundling except for Svelte packages (#2137)

Author: benmccann

.changeset/cuddly-files-decide.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] enable Vite pre-bundling except for Svelte packages

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

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { rimraf } from '../filesystem/index.js';
 import create_manifest_data from '../../core/create_manifest_data/index.js';
-import { copy_assets, get_no_external, posixify, resolve_entry } from '../utils.js';
+import { copy_assets, get_svelte_packages, posixify, resolve_entry } from '../utils.js';
 import { deep_merge, print_config_conflicts } from '../config/index.js';
 import { create_app } from '../../core/create_app/index.js';
 import vite from 'vite';
@@ -33,6 +33,7 @@ export async function build(config, { cwd = process.cwd(), runtime = '@sveltejs/
 	rimraf(build_dir);
 
 	const output_dir = path.resolve(cwd, `${SVELTE_KIT}/output`);
+	const svelte_packages = get_svelte_packages(cwd);
 
 	const options = {
 		cwd,
@@ -49,7 +50,8 @@ export async function build(config, { cwd = process.cwd(), runtime = '@sveltejs/
 		}),
 		output_dir,
 		client_entry_file: `${SVELTE_KIT}/build/runtime/internal/start.js`,
-		service_worker_entry_file: resolve_entry(config.kit.files.serviceWorker)
+		service_worker_entry_file: resolve_entry(config.kit.files.serviceWorker),
+		svelte_packages
 	};
 
 	const client_manifest = await build_client(options);
@@ -132,7 +134,7 @@ async function build_client({
 	});
 
 	/** @type {any} */
-	const user_config = config.kit.vite();
+	const vite_config = config.kit.vite();
 
 	const default_config = {
 		server: {
@@ -143,10 +145,10 @@ async function build_client({
 	};
 
 	// don't warn on overriding defaults
-	const [modified_user_config] = deep_merge(default_config, user_config);
+	const [modified_vite_config] = deep_merge(default_config, vite_config);
 
 	/** @type {[any, string[]]} */
-	const [merged_config, conflicts] = deep_merge(modified_user_config, {
+	const [merged_config, conflicts] = deep_merge(modified_vite_config, {
 		configFile: false,
 		root: cwd,
 		base,
@@ -203,6 +205,7 @@ async function build_client({
  *   output_dir: string;
  *   client_entry_file: string;
  *   service_worker_entry_file: string | null;
+ *   svelte_packages: string[];
  * }} options
  * @param {ClientManifest} client_manifest
  * @param {string} runtime
@@ -216,7 +219,8 @@ async function build_server(
 		build_dir,
 		output_dir,
 		client_entry_file,
-		service_worker_entry_file
+		service_worker_entry_file,
+		svelte_packages
 	},
 	client_manifest,
 	runtime
@@ -420,8 +424,8 @@ async function build_server(
 			.trim()
 	);
 
-	/** @type {any} */
-	const user_config = config.kit.vite();
+	/** @type {import('vite').UserConfig} */
+	const vite_config = config.kit.vite();
 
 	const default_config = {
 		server: {
@@ -432,10 +436,10 @@ async function build_server(
 	};
 
 	// don't warn on overriding defaults
-	const [modified_user_config] = deep_merge(default_config, user_config);
+	const [modified_vite_config] = deep_merge(default_config, vite_config);
 
 	/** @type {[any, string[]]} */
-	const [merged_config, conflicts] = deep_merge(modified_user_config, {
+	const [merged_config, conflicts] = deep_merge(modified_vite_config, {
 		configFile: false,
 		root: cwd,
 		base,
@@ -458,11 +462,13 @@ async function build_server(
 				preserveEntrySignatures: 'strict'
 			}
 		},
-		resolve: {
-			alias: {
-				$app: path.resolve(`${build_dir}/runtime/app`),
-				$lib: config.kit.files.lib
-			}
+		optimizeDeps: {
+			// exclude Svelte packages because optimizer skips .svelte files leading to half-bundled
+			// broken packages https://github.com/vitejs/vite/issues/3910
+			exclude: [
+				...((vite_config.optimizeDeps && vite_config.optimizeDeps.exclude) || []),
+				...svelte_packages
+			]
 		},
 		plugins: [
 			svelte({
@@ -472,16 +478,17 @@ async function build_server(
 				}
 			})
 		],
-		// this API is marked as @alpha https://github.com/vitejs/vite/blob/27785f7fcc5b45987b5f0bf308137ddbdd9f79ea/packages/vite/src/node/config.ts#L129
-		// it's not exposed in the typescript definitions as a result
-		// so we need to ignore the fact that it's missing
+		resolve: {
+			alias: {
+				$app: path.resolve(`${build_dir}/runtime/app`),
+				$lib: config.kit.files.lib
+			}
+		},
 		ssr: {
 			// note to self: this _might_ need to be ['svelte', '@sveltejs/kit', ...get_no_external()]
 			// but I'm honestly not sure. roll with this for now and see if it's ok
-			noExternal: get_no_external(cwd, user_config.ssr && user_config.ssr.noExternal)
-		},
-		optimizeDeps: {
-			entries: []
+			// @ts-expect-error ssr is considered in alpha, so not yet exposed by Vite
+			noExternal: [...((vite_config.ssr && vite_config.ssr.noExternal) || []), ...svelte_packages]
 		}
 	});
 
@@ -500,11 +507,21 @@ async function build_server(
  *   output_dir: string;
  *   client_entry_file: string;
  *   service_worker_entry_file: string | null;
+ *   svelte_packages: string[];
  * }} options
  * @param {ClientManifest} client_manifest
  */
 async function build_service_worker(
-	{ cwd, base, config, manifest, build_dir, output_dir, service_worker_entry_file },
+	{
+		cwd,
+		base,
+		config,
+		manifest,
+		build_dir,
+		output_dir,
+		service_worker_entry_file,
+		svelte_packages
+	},
 	client_manifest
 ) {
 	// TODO add any assets referenced in template .html file, e.g. favicon?
@@ -541,7 +558,7 @@ async function build_service_worker(
 	);
 
 	/** @type {any} */
-	const user_config = config.kit.vite();
+	const vite_config = config.kit.vite();
 
 	const default_config = {
 		server: {
@@ -552,10 +569,10 @@ async function build_service_worker(
 	};
 
 	// don't warn on overriding defaults
-	const [modified_user_config] = deep_merge(default_config, user_config);
+	const [modified_vite_config] = deep_merge(default_config, vite_config);
 
 	/** @type {[any, string[]]} */
-	const [merged_config, conflicts] = deep_merge(modified_user_config, {
+	const [merged_config, conflicts] = deep_merge(modified_vite_config, {
 		configFile: false,
 		root: cwd,
 		base,
@@ -573,13 +590,18 @@ async function build_service_worker(
 			outDir: `${output_dir}/client`,
 			emptyOutDir: false
 		},
+		optimizeDeps: {
+			// exclude Svelte packages because optimizer skips .svelte files leading to half-bundled
+			// broken packages https://github.com/vitejs/vite/issues/3910
+			exclude: [
+				...((vite_config.optimizeDeps && vite_config.optimizeDeps.exclude) || []),
+				...svelte_packages
+			]
+		},
 		resolve: {
 			alias: {
 				'$service-worker': path.resolve(`${build_dir}/runtime/service-worker`)
 			}
-		},
-		optimizeDeps: {
-			entries: []
 		}
 	});
 

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

@@ -11,7 +11,7 @@ import { create_app } from '../../core/create_app/index.js';
 import { rimraf } from '../filesystem/index.js';
 import { respond } from '../../runtime/server/index.js';
 import { getRawBody } from '../node/index.js';
-import { copy_assets, get_no_external, resolve_entry } from '../utils.js';
+import { copy_assets, get_svelte_packages, resolve_entry } from '../utils.js';
 import { deep_merge, print_config_conflicts } from '../config/index.js';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { get_server } from '../server/index.js';
@@ -112,6 +112,8 @@ class Watcher extends EventEmitter {
 		// don't warn on overriding defaults
 		const [modified_vite_config] = deep_merge(default_config, vite_config);
 
+		const svelte_packages = get_svelte_packages(this.cwd);
+
 		/** @type {[any, string[]]} */
 		const [merged_config, conflicts] = deep_merge(modified_vite_config, {
 			configFile: false,
@@ -140,6 +142,14 @@ class Watcher extends EventEmitter {
 					input: path.resolve(`${this.dir}/runtime/internal/start.js`)
 				}
 			},
+			optimizeDeps: {
+				// exclude Svelte packages because optimizer skips .svelte files leading to half-bundled
+				// broken packages https://github.com/vitejs/vite/issues/3910
+				exclude: [
+					...((vite_config.optimizeDeps && vite_config.optimizeDeps.exclude) || []),
+					...svelte_packages
+				]
+			},
 			plugins: [
 				svelte({
 					extensions: this.config.extensions,
@@ -156,12 +166,9 @@ class Watcher extends EventEmitter {
 					...(this.https ? { server: this.server, port: this.port } : {})
 				}
 			},
-			optimizeDeps: {
-				entries: []
-			},
 			ssr: {
-				// @ts-expect-error ssr is considered in beta, so not exposed by Vite
-				noExternal: get_no_external(this.cwd, vite_config.ssr && vite_config.ssr.noExternal)
+				// @ts-expect-error ssr is considered in alpha, so not yet exposed by Vite
+				noExternal: [...((vite_config.ssr && vite_config.ssr.noExternal) || []), ...svelte_packages]
 			}
 		});
 

packages/kit/src/core/utils.js

@@ -82,7 +82,7 @@ export function posixify(str) {
  * @param {string} cwd
  * @returns {string[]}
  */
-function find_svelte_packages(cwd) {
+export function get_svelte_packages(cwd) {
 	const pkg_file = path.join(cwd, 'package.json');
 	if (!fs.existsSync(pkg_file)) return [];
 
@@ -98,11 +98,3 @@ function find_svelte_packages(cwd) {
 		return !!dep_pkg.svelte;
 	});
 }
-
-/**
- * @param {string} cwd
- * @param {string[]} [user_specified_deps]
- */
-export function get_no_external(cwd, user_specified_deps = []) {
-	return [...user_specified_deps, ...find_svelte_packages(cwd)];
-}

packages/kit/test/apps/basics/src/routes/load/change-detection/__layout.svelte

@@ -1,18 +1,18 @@
 <script context="module">
-	let loads = 0;
+	let count = 0;
 
 	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ fetch }) {
 		const res = await fetch('/load/change-detection/data.json');
 		const { type } = await res.json();
 
-		loads += 1;
+		count += 1;
 
 		return {
 			maxage: 5,
 			props: {
 				type,
-				loads
+				loads: count
 			}
 		};
 	}

packages/kit/test/apps/basics/src/routes/load/change-detection/one/[x].svelte

@@ -1,15 +1,15 @@
 <script context="module">
-	let loads = 0;
+	let count = 0;
 
 	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page }) {
-		loads += 1;
+		count += 1;
 
 		return {
 			maxage: 5,
 			props: {
 				x: page.params.x,
-				loads
+				loads: count
 			}
 		};
 	}

packages/kit/test/apps/basics/src/routes/load/change-detection/two/[y].svelte

@@ -1,15 +1,15 @@
 <script context="module">
-	let loads = 0;
+	let count = 0;
 
 	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page }) {
-		loads += 1;
+		count += 1;
 
 		return {
 			maxage: 5,
 			props: {
 				y: page.params.y,
-				loads
+				loads: count
 			}
 		};
 	}