Svelte-kit and NPM module with Svelte src

user_2237076 0
Viewed 371

I have an npm package, written in typescript, that also exports some svelte components, obviously svelte-kit will need the component src, and not a compiled component, I have explicitly added the location of this package to the svelte-kit tsconfig.json but I'm still hitting Cannot use import outside a module:.... import App from "./components/App.svelte"; (the import App... is a line of code within the the module src)

Can anybody advise what I need to do / setup in the npm package.json / build / typescript, and on the svelte-kit app that wants to consume this package?

The way I see it, I want this npm package to be consumed entirely from its typescript src, and get compiled / bundled with the rest of the app but not sure if that is possible.

svelte typescript
1 Answers

You can actually use SvelteKit for the package project as well and it will handle the setup for you:

Usually, you think of SvelteKit as an application framework, where the contents of the src/routes folder become the public pages of your application, and the src/lib folder is for shared code, i.e. an internal library. But you can use svelte-kit package to reverse this paradigm: your src/lib folder becomes the public facing package and the src/routes could be used for testing, as a demo and for documentation. We can also configure the packages entry point (or package root) using a src/lib/index.js file and SvelteKit even creates TypeScript definitions inside .d.ts files for you! You can read more about packaging libraries with SvelteKit in the Docs.

Quick Start Instructions:

  • run npm init svelte@next my-toast-lib-name
  • create .js, .ts or .svelte files inside src/lib
  • (optionally) create an src/lib/index.ts file to re-export your files for easier importing
  • run npm install -D typescript svelte2tsx to install necessary modules for packaging
  • run npm run package to package up your library
  • publish package to npm
user_80811540
Related