How to import Svelte library written in TypeScript-CodePudding

I created a library (https://github.com/TeemuKoivisto/svelte-tree-view) which I import in another project as a Svelte component. Which works fine linked locally (yarn link svelte-tree-view) but when I use the npm downloaded version inside my node_modules, I get this extremely weird error:

[!] (plugin svelte) ValidationError: The $ prefix is reserved, and cannot be used for variable and import names
../node_modules/svelte-tree-view/src/TreeView.svelte
77:     rootElementStore.set(rootElement);
78: });
79: var $$$$$$$$ = null;
    ^
80: var $$vars$$ = [$$props, rootElement, $treeStore, treeStore, TreeNode_svelte_1.default];</script>

Which is quite difficult to debug as there isn't much discussion or blog posts out there. Anyway, I surprised myself and finally solved it with a quite simple solution and I want to make this post to help others out there. Here are the most important libraries related to this problem:

    "rollup": "^2.56.3",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-ts": "^1.4.2",
    "svelte": "^3.42.6",
    "svelte-preprocess": "^4.9.4",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3"

CodePudding user response：

Well, the answer is adding typescript block to your svelte.config.js that defines a tsconfigFile. Why you need it, somewhat unclear still to me, but I'm glad it works.

The full svelte.config.js:

const autoPreprocess = require('svelte-preprocess')

const preprocessOptions = {
  scss: { prependData: `@import 'src/global.scss';` },
  typescript: {
    tsconfigFile: './tsconfig.json'
  }
}

module.exports = {
  preprocess: autoPreprocess(preprocessOptions),
  preprocessOptions
}

EDIT: Looking at the problem more closely, apparently it's not recommended to create TypeScript Svelte libraries. https://github.com/sveltejs/component-template/issues/29#issuecomment-905481560 Which means I have to waste even more time on this. Oh the humanity..

CodePudding user response：

The specific error you are getting is likely fixed with svelte-preprocess version 4.9.5 . It's likely not finding your tsconfig.json as that one is tried to find from the file going up, and maybe you are in a monorepo where your node_modules are above the project with the tsconfig.json in question.

But as you said, this all comes down to providing an unpreprocessed version of the library, which should not be done, as you force everyone who wants to use your library to setup TypeScript preprocessing you run into weird errors like yours.

Fortunately, SvelteKit has you covered with its packaging command. It will preprocess Svelte files (JS/HTML/CSS afterwards) and also handle TS->JS transpilation. It will also output type definitions files (d.ts) of these files. So you can keep writing your library using TS and provide a consumable package for everyone. More info: https://kit.svelte.dev/docs#packaging