Jo Does Tech
Jo Does Tech
Jun 26, 2022

How to create and publish your own SvelteKit libraries.

Disclaimer

At the time of writing this, SvelteKit is pre-v1.0.0 and SvelteKit packages are an experimental feature. This guide could be outdated very quickly.

Packaging

Under the hood SvelteKit uses Vite. Although Vite is awesome, SvelteKit/Vite cannot currently import pure CommonJS modules (CJS). SvelteKit/Vite expects ES Modules (ESM). Sveltekit comes with the package command to help us achieve this. First create a SvelteKit application as per this guide.

npx svelte-kit package
cd package
npm publish

The package command builds the contents of the lib directory and outputs the compiled files into the package directory. Each time the script is re-run the package directory is re-created, you do not need to clear it down. We then simply need to publish the contents of the directory that was created.

Controlling which features are exported

The package script copies over the package.json from the root of the project to the publishable directory. While doing this, the script adds exports to the package.json for each file under the lib directory.

Private components/files

Simply prefix files with an _ to keep components and files from being exposed as exports.

Manually adding exports to the root package.json

It is possible to add custom exports (such as default) to the root package.json. The automatically added exports from the package script will overlay these manually added exports.

...
"exports": {
    ".": "./YourComponent.svelte"
},
...

Issues

I had a few issues with the above. Such as:

Missing "." export

X [ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "my-package". The package may have incorrect main/module/exports specified in its package.json: Missing "." export in "my-package" package

To fix this issue I added a "." import like the one shown earlier in this post.

Unfortunately even after this, with the experimental version of SvelteKit available at the time of writing, I could not get this to work with TypeScript Typings working correctly.

<Component> is not a valid SSR component

I also had an issue that arose at run-time when attempting to import any import other than the default import as seen below:

Error: <Component> is not a valid SSR component.