5

Is it possible to define a special mapping that enables PhpStorm (or other WebStorm based IDEs) to have the ability to find files located in SvelteKit's special $lib directory alias?

For example, in PhpStorm, I'm importing global styles like so:

<script context="module">
    import '$lib/global-styles.scss';
</script>

However, the IDE unfortunately displays "Cannot find declaration to go to" when attempting to navigate to that particular file:

Popup error displaying "Cannot find declaration to go to"

3 Answers 3

8

Seems the fix was reasonably easy (inspired by this answer). Just add a path alias to any JS file in the root of your project called .webstorm.js (filename isn't important):

// eslint-disable
System.config({
    "paths": {
        "$lib/*": "./src/lib/*",
    }
});

Now navigation to paths under $lib/* should "just work" ✨ automatically. Unfortunately I can't find documentation for this special WebStorm-specific System.config() workaround, the best I could find was this comment on Jetbrains' issue tracker.


Edit (May 2, 2023): Also, for TypeScript support, use the method suggested in This Answer by Tyrone which may have broader support outside of just Jetbrains IDEs

4
  • For me, it doesn't work
    – polRk
    Commented Jul 16, 2022 at 6:00
  • @polRk Can you provide more details about what IDE you're using, what you tried and what is happening? Commented Jul 20, 2022 at 20:52
  • Did not work for me either (using Webstorm)
    – Benzy
    Commented Oct 24, 2022 at 7:44
  • Worked on PHPStorm with .phpstorm.js file
    – ciaksoy
    Commented Feb 19, 2023 at 11:09
7

I had this issue but resolved it (since I am using Typescript) by adding a paths entry in my ./tsconfig.json at the root of my project.

{
  // ...
  "compilerOptions": {
      "paths": {
          "$lib/*": ["src/lib/*"],
      }
   }
}
2
  • That's great, thanks Tyrone. That works for me in PhpStorm as well. I'll drop this into my answer and credit you! Commented May 3, 2023 at 2:38
  • 1
    p.s. Thanks for editing, my intent was to call attention to your answer. 😊 Updating it to actually link to your answer as well. Commented May 3, 2023 at 8:02
3

Try to add baseUrl in tsconfig.json of your project:

{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
    ...
    "baseUrl": "./src"
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.