Automatically add Svelte component libraries to ssr.noExternal

Is your feature request related to a problem? Please describe. Vite will exclude many node_modules packages from the SSR bundle it generates, using a set of heuristics. While they’re subject to change, those heuristics typically exclude Svelte component libraries from the bundle, and so we need to explicitly add them to ssr.noExternal, as in #806 or the kit.svelte.dev config.

Describe the solution you’d like A convention exists for declaring a package to be a component library — pkg.svelte. It’s not used universally (e.g. Svelte GL and site-kit don’t use it, which I was slightly surprised about. not sure what i was thinking) but with #518 we can make it more of a standard.

We could forcibly add packages with a pkg.svelte to ssr.noExternal, in addition to any values the user may have specified. This would reduce the number of bugs along the lines of #806.

Relatedly, I can’t remember the reason we added the current ssr.noExternal block to the template… https://github.com/sveltejs/kit/blob/ccb8825fd97d7f23ee961b30077e1a2bf1a53b42/packages/create-svelte/template/svelte.config.cjs#L15-L19 …but its presence feels like a design failure, and I think we should remove it and try and solve whatever issues arise a different way (by having adapters create their own single file bundles if appropriate, etc).

Describe alternatives you’ve considered Solve it with documentation. We could also force devDependencies to always be bundled rather than dependencies, and expect people to understand the difference.

How important is this feature to you? Not solving this one way or another is going to cause people to get mad at us.

[JBusillo]

I have a couple of observations:

1. All the dependencies of svelte-materialify are ESM. There is one dependency of carbon-components-svelte (clipboard-copy) that is a CJS module.
2. The Vite dev server doesn’t transform dependencies of any “root” dependencies. Since there is no tree-shaking in dev, it loads all dependencies (including clipboard-copy). For carbon-components-svelte, this generates the “module is not defined” error.

I cloned Vite, and made a change to run to transform all js modules to ESM:

// transformRequest.ts
import esbuild from 'esbuild'
...
if (file.endsWith("js")) {
    const r = await esbuild.transform(code, { format: "esm" })
    code = r.code
}
...

This transforms all .js files, even those that are already ESM, but esbuild doesn’t modify the code in that case. Both carbon-components-svelte and svelte-materialify are in my package.json “dependencies”.

Both ‘npm run dev’ and npm build/start appear to work.

Does this sound like a Vite bug, i.e., something they may have overlooked? I’m new at all this, and you may already know the source of this issue, so please excuse me if I’m not adding any value to this discussion.

[janosh]

@benaltair See https://kit.svelte.dev/faq#packages.

Old beta versions of the SvelteKit template included the configuration value noExternal: Object.keys(pkg.dependencies || {}) in svelte.config.js. First, please check if this line is present in your project and remove it if so. Removing this line fixes most issues and has since been removed from the template.