How do I create an npm package that I can import into sveltekit? - svelte-3

Question

I would like to create a simple npm package and import that into svelte components, however, I cannot seem to use index files to import deeply nested files, e.g.
// routes/test.svelte
<script lang="ts">
import { Test } from '#my-co/my-lib/dist/folder1/folder2/test';
const test = new Test('foo', 'bar');
</script>
works, but
// routes/test.svelte
<script lang="ts">
import { Test } from '#my-co/my-lib';
const test = new Test('foo', 'bar');
</script>
does not. I have the following in the index.ts file in my npm module:
export { Test } from './folder1/folder2/test';
This strangely also does seem to work in ssr (dev server output in console seems to pick the import {Test} from '#my-co/my-lib' correctly), but not in the browser, where I get the error that Test is not a constructor...
Npm library package.json:
{
"name": "#myco/my-lib",
"version": "0.0.2",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "tsc",
"prepare": "npm run build"
},
"author": "redacted",
"license": "ISC",
"dependencies": {
"#types/rosie": "0.0.40",
"#types/slug": "^5.0.3",
"rosie": "^2.1.0",
"slug": "^5.1.1"
}
}
Npm library tsconfig
{
"compilerOptions": {
"declaration": true,
"strictNullChecks": true,
"outDir": "dist",
"moduleResolution": "node",
"module": "es2015",
"target": "es5",
"sourceMap": true,
"lib": ["es2015", "dom"],
"rootDir": "src"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
Lib structure
my-lib/
| dist/
| node_modules/
| src/
| | folder1/
| | | folder2/
| | | | test.ts
test.ts
export class Test {
foo: string;
bar: string;
constructor(foo: string, bar: string) {
this.foo = foo;
this.bar = bar;
}
testMe() {
console.log("foobar", this.foo, this.bar);
}
}

Answer 1

The svelte-kit package command should automatically do everything for you (docs).
This Youtube video should explain everything.
The steps it provides to publish are:
npm init svelte#next project-name
cd project-name
Create component
npx svelte-kit package
cd package
Login to npm / create an account
npm publish --access public

Answer 2

While Caleb's answer did not really help in my case, I think it was a bit of a pointer as to what was going wrong. I did not intend to write a svelte-focused Component library, but rather a general model/factory library to be reused between the front- and backend.
I did a couple of things since this issue occurred and here is a list of things I think went wrong:
Local linking of the npm package into my project caused issues (npm link). I have very little experience with all the build tools in sveltekit but figured out where those stale/non-functional libs are referenced from. I deleted the node-modules/.vite folder which sometimes resolved my issues (I greped for seemingly cached values which led me to this directory. In my dev experience quite uncommon to have found build artifacts in node-modules, so that was a bit tedious to find in that place).
I converted my npm package to a hybrid ESM/CJS module (previously CommonJS only). I'm unsure whether that resolved the initial issues, but might be worth a try.
I think the main issue was the local linking and some sort of build caching going on in vite.
That being said, I haven't encountered any issues with the library ever since.