Working with Sveltekit library packages inside a monorepo

Issue

I like the concept of the monorepo’s but I keep running into small irritating issues. One of them right now is that I want to build a Sveltekit project but use it as a library, because I do like how svelte-package wraps everything up into a package nicely that plays nice with importing into other projects.

But right now if I create a SvelteKit project in my package folder, and try to install it into one of my apps, the link that pnpm makes is to the root package folder with the source.

What I also want to do though, is to be able to work on the package and see live updates on the app.

Setup a new package

I tried this with a new package that I’m going to use for my own personal UI library called kuix .

I created a new SvelteKit project using the npx cli and selected a new library project. I named the project in package.json as @kaashin/kuix .

I’ll add a new Button component into a folder that I’m calling prime where I’ll put all primitive type UI elements. Wanted to use primitive as a name but sort of a pain to type out.

// Button
<script>
  export let disabled = false;
</script>

<button class="bg-blue-500 rounded-md" {disabled}>
	<slot />
</button>

Install package into app

Before I could install the package, I want to use the package that is generated by svelte-package in the package folder.

Inside the monorepo root folder, I updated the pnpm-workspace.yaml to ignore the main kuix folder and include the kuix/package folder.

In my blog app I installed the kuix as a dev dependency.

>pnpm install -D @kaashin/kuix

// result
// dependencies:
// + @kaashin/kuix 0.0.1 <- ..\..\packages\kuix\package

Note that the path was correct, so that was good.

Monorepo scripts constraint

Always having to drill into a particular package or app folder to run particular scripts is annoying. So I prepared two scripts that I can run from the root folder.

Import and test

So I’ll import the Button and test it out.

<script>
	import { Button } from '@kaashin/kuix/prime';
</script>

<Button>Say hi!</Button>

Ooo… A button.

However, when I start editing the component, like changing the default color to orange, the component did not update. And that was because the built package in the package folder hasn’t been updated yet.

Build with —watch

I added another script to the monorepo root package.json which will build on any changes to the package source folder.

"kuix:build-watch": "cd packages/kuix && pnpm run build --watch"

Now when I edit my components in my package folder while working on my app, I can get live updates.

Did it build?

I've tried this before and it didn't build on Vercel. This time it also didn't work and I banged my head on the problem for hours.

But just as I was about to give up and ditch the monorepo, I reread the error message in the Vercel console and noticed that it was telling me what was wrong the whole time. The path to the package was right but doesn't exist! And it's because I simply forgot that the “package” folder was in the .gitignore .