force Vite to bundle component libraries in SSR - fixes #904

.changeset/few-points-taste.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Force Vite to bundle Svelte component libraries in SSR

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, posixify, resolve_entry } from '../utils.js';
+import { copy_assets, get_no_external, posixify, resolve_entry } from '../utils.js';
 import { create_app } from '../../core/create_app/index.js';
 import vite from 'vite';
 import svelte from '@sveltejs/vite-plugin-svelte';
@@ -438,11 +438,7 @@ async function build_server(
 		// @ts-ignore
 		ssr: {
 			...user_config.ssr,
-			noExternal: [
-				'svelte',
-				'@sveltejs/kit',
-				...((user_config.ssr && user_config.ssr.noExternal) || [])
-			]
+			noExternal: get_no_external(cwd, user_config.ssr && user_config.ssr.noExternal)
 		},
 		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 { ssr } from '../../runtime/server/index.js';
 import { getRawBody } from '../http/index.js';
-import { copy_assets } from '../utils.js';
+import { copy_assets, get_no_external } from '../utils.js';
 import svelte from '@sveltejs/vite-plugin-svelte';
 import { get_server } from '../server/index.js';
 import '../../install-fetch.js';
@@ -107,6 +107,10 @@ class Watcher extends EventEmitter {
 			optimizeDeps: {
 				...user_config.optimizeDeps,
 				entries: []
+			},
+			ssr: {
+				...user_config.ssr,
+				noExternal: get_no_external(this.cwd, user_config.ssr && user_config.ssr.noExternal)
 			}
 		});
 

packages/kit/src/core/utils.js

@@ -74,3 +74,35 @@ export function resolve_entry(entry) {
 export function posixify(str) {
 	return str.replace(/\\/g, '/');
 }
+
+/**
+ * Get a list of packages that use pkg.svelte, so they can be added
+ * to ssr.noExternal. This is done on a best-effort basis to reduce
+ * the frequency of 'Must use import to load ES Module' and similar
+ * @param {string} cwd
+ * @returns {string[]}
+ */
+function find_svelte_packages(cwd) {
+	const pkg_file = path.join(cwd, 'package.json');
+	if (!fs.existsSync(pkg_file)) return [];
+
+	const pkg = JSON.parse(fs.readFileSync(pkg_file, 'utf8'));
+
+	const deps = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.devDependencies || {})];
+
+	return deps.filter((dep) => {
+		const dep_pkg_file = path.join(cwd, 'node_modules', dep, 'package.json');
+		if (!fs.existsSync(dep_pkg_file)) return false;
+
+		const dep_pkg = JSON.parse(fs.readFileSync(dep_pkg_file, 'utf-8'));
+		return !!dep_pkg.svelte;
+	});
+}
+
+/**
+ * @param {string} cwd
+ * @param {string[]} [user_specified_deps]
+ */
+export function get_no_external(cwd, user_specified_deps = []) {
+	return ['svelte', '@sveltejs/kit', ...user_specified_deps, ...find_svelte_packages(cwd)];
+}