Cannot find module '$lib/...' or '$app/...' from language server for .svelte files in default configuration of sveltekit

Describe the bug

In a fresh install of sveltekit with demo app and typescript, LSP works fine out of the box except for imports from the $ aliases in .svelte files.

These throw a diagnostic such as Cannot find module '$lib/Counter.svelte' or its corresponding type declarations and jump to definition does not work for those imported symbols.

These diagnostics disappear if I replace $lib or $app with absolute paths and jump to definition starts working.

These diagnostics DO NOT happen in .ts files, where jump to definition works fine for symbols imported from $app, for example (see src/lib/form.ts in the demo app).

Reproduction

I’m using a fresh install of Node 16.14.2 LTS straight from the node main page tarball. Fresh global installs of svelte-language-server, typescript-language-server and typescript. Using the Helix editor which has a native LSP client, using the default config that automatically finds svelteserver for .svelte files and typescript-language-server for .js and .ts files.

I set up a new sveltekit project as per instructions on sveltekit main page answering yes for typescript and demo app and no for everything else. Cd to app dir, npm install, npm run dev -- --open. No changes made to anything.

Edit a .svelte file from the app root dir: hx src/routes/index.svelte

As soon as the language server loads, LSP features start working fine but it throws a diagnostic for the line import Counter from '$lib/Counter.svelte'; that reads: Cannot find module '$lib/Counter.svelte' or its corresponding type declarations and jump to definition does not work for that symbol (works fine otherwise for everything else in the same file).

The about.svelte page does the same thing for import { browser, dev } from '$app/env'; .

Expected behaviour

No diagnostic, jump to definition works.

System Info

• OS: Debian 11
• IDE: Helix

Which package is the issue about?

language-server

Additional Information, eg. Screenshots

No response

[dustincleveland]

I encountered this issue early on in an empty svelte-kit app. npm run prepare just told me that I had a missing script. Instead, I just needed to manually add the following to .svelte-kit/tsconfig.json:

"paths": {
  "$lib": [
      "src/lib"
  ],
  "$lib/*": [
      "src/lib/*"
  ]
},

[ngould]

I got to the same answer as @dustincleveland, although worth clarifying that "paths" needs to be under compilerOptions. E.g.,

{
  "compilerOptions": {
    ...,
    "paths": {
      "$lib/*": ["src/lib/*"],
      ...
    },
}