Sveltekit Package generated types are not recognized by TypeScript

I just tried packaging and consuming a new NPM package for Svelte that contains a single UI component. The source is here.

I followed all recommendations, at least to the best of my knowlege, found in the Packaging document for SvelteKit.

While the package compiles and uploads to NPMJS, it does not function when consumed.

I got the following error in the VS Code interface:

> Argument of type 'typeof import("c:/(blah blah)/node_modules/svelte-htable/dist/index")' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'.
Type 'typeof import("c:/(blah blah)/node_modules/svelte-htable/dist/index")' provides no match for the signature 'new (args: { target: any; props?: any; }): ATypedSvelteComponent'.

So what am I doing wrong?

This error occurs because TypeScript is not able to locate the generated types. To fix this, you can add a paths property to their tsconfig.json file, which maps the module name to the actual file location.

Here is an example paths property that the user can add to their tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "types/generated/*": ["src/types/generated/*"]
    }
  }
}

This tells TypeScript to look for any module starting with types/generated/ in the src/types/generated/ directory.

After adding this paths property, the user should be able to import the generated types like this:

import type { MyType } from 'types/generated/blah';

Note that we use import type instead of just import because we are only importing the types, not any runtime values.