Auto Import/Importing at all does not work with Sveltekit and Webstorm

WebStorm cannot recognize and auto-import components from newly built and published Svelte 5 library projects (from node_modules) with the new Component syntax. The old SvelteComponents in the .d.ts files work fine, but Svelte 5 uses Component instead. Everything else, like classes and functions, can be imported, but unfortunately, components cannot.

0
5 comments

Do you have a sample project you can share that reproduces the issue?

0

For example we have this npm package named :"tanstack-table-8-svelte-5" which uses the new Component type definition of Svelte 5. When you import it into any svelte 5 project the IDE (webstorm or phpstorm) can not auto import the Component (Placeholder in this case). When you import the component manually, everything works fine. Of course the problem exists with every Svelte5 component library loaded from npm not only the one I've picked.

0

Unfortunately I'm not sure how to reproduce the issue when using this library, can't see any components in the https://tanstack.com/table/latest docs. Please could you share a minimal code snippet that would be sufficient to reproduce the problem? This would help us a lot with the further investigation.

0

My apologies, I cited the wrong repository. Please try this one instead: svelte-heros.

Steps to reproduce the error:

Run npm sv create
Run npm i svelte-heros
Open WebStorm
Open the file ./src/routes/+page.svelte
Try to add, for example, the ArrowCircleDown component from the svelte-heros package to the HTML part.
Sometimes the IDE suggests the import, sometimes it does not, but it never actually completes the import.

This package uses the latest format of Svelte components in the .d.ts files:

import type { Props } from './types';
declare const ArrowDown: import("svelte").Component<Props, {}, "">;
export default ArrowDown;

In my experience, any other formats that the IDE supports are deprecated and do not fully cover the functionality.

0

Thank you for your help in providing all the details. We managed to reproduce the problem and have created a new ticket: WEB-70263. Please vote for it to get notified of any progress.

1

Please sign in to leave a comment.