$lib imports not working in svelte files in a symlinked project folder

[Titoubiz]

Describe the bug

I have a SvelteKit project on my Debian machine, and I access it through a symbolic link.

On my editor (Kate, but I have also tried on VS Code), importing anything from the $lib folder into a .svelte file causes this error:

Cannot find module '$lib/example' or its corresponding type declarations.

Importing from $lib into .ts files works well though.

Reproduction

I recreated a SvelteKit + Typescript project from scratch, with this src structure:

src/
├─ lib/
│  ├─ test.ts
│  ├─ test.svelte
│  ├─ example.ts

I export a const value in example.ts, and then import it in the other files. So in my example example.ts contains:

export const example = 1;

And test.svelte:

<script lang="ts">
	import { example } from "$lib/example"; // this import is not resolved
	console.log(example);
</script>

I open my editor with a command like this:

code ~/symlink-to-my-project/src/lib/test.svelte

I let all the other files by default. My attempts to use a preprocessor and aliases in svelte.config.js or to set verbatimModuleSyntax and preserveSymlinks in tsconfig.json didn’t help me.

Expected behaviour

Having no error when I import from $lib folder

System Info

• OS: Debian
• IDE: VS 1.108.2 with Svelte for VS Code 109.13.0

Also had the issue with Kate + svelte-language-server 0.17.25

Which package is the issue about?

svelte-language-server

Additional Information, eg. Screenshots

Thanks for any help! I can live without using this symlink but I thought it was worth reporting it.

[jasonlyu123]

I think the problem isn't about the symlink, but where you open the editor. We currently ignore the tsconfig.json outside of the LSP workspaceFolders. code ~/symlink-to-my-project/src/lib/test.svelte doesn't open VSCode in a folder where the tsconfig.json. It opens the file either in an already-opened folder or just the file.

As for Kate, did you write your own server config? I didn't see it in the official repo. You can check if the rootIndicationFileNames config. This should be the config Kate used to determine which directory the LSP workspaceFolders should be.

[Titoubiz]

Thanks @jasonlyu123 for the reply!

Indeed, I have tried again opening VS Code, and it works; so I guess the issue comes from my config or from Kate.

My config is the following:

"svelte": {
    "command": ["svelteserver", "--stdio"],
    "rootIndicationFileNames": ["package.json", ".git"],
    "url": "https://github.com/sveltejs/language-tools",
    "highlightingModeRegex": "^HTML$"
}

It has always worked so far, and that’s why I suspected my new symlink to be the cause.

I get this log from its LSP client:

[23:46:15  PATH Informations] /home/titoubiz/.local/share/pnpm:/home/titoubiz/.local/share/n/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games
[23:46:15  Client LSP Journal] Serveur svelte@/home/titoubiz/Desktop/svelte-lsp-bug démarré : /home/titoubiz/.local/share/pnpm/svelteserver --stdio
[23:46:16  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
    Initialize language server at  file:///home/titoubiz/Desktop/svelte-lsp-bug
[23:46:16  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
    Initialize new ts service at
[23:46:16  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
    Trying to load configs for /home/titoubiz/Desktop/svelte-lsp-bug
[23:46:16  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
    Loaded config at  /home/titoubiz/Desktop/symlink-svelte-lsp-bug/svelte.config.js
    Loaded config at  /home/titoubiz/Desktop/svelte-lsp-bug/svelte.config.js
[23:46:16  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
    SnapshotManager File Statistics:
    Project files: 0
    Svelte files: 1
    From node_modules: 0
    Total: 1

If you think the issue is from Kate side, I can open a ticket there instead.

[jasonlyu123]

From the log, it indeed doesn't load the tsconfig. Can you provide more details on how you set up the symlink to the project? Also, does your tsconfig.json under the same symlink? What is the content of the tsconfig.json?

[Titoubiz]

My project is here:
/home/titoubiz/Desktop/svelte-lsp-bug

And I created a symlink (basic command ln -s svelte-lsp-bug/ symlink-svelte-lsp-bug)
/home/titoubiz/Desktop/symlink-svelte-lsp-bug

When I open the original folder with kate, I get these logs:

[21:00:14  Client LSP Journal] Serveur svelte@/home/titoubiz/Desktop/svelte-lsp-bug démarré : /home/titoubiz/.local/share/pnpm/svelteserver --stdio
[21:00:15  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
	Initialize language server at  file:///home/titoubiz/Desktop/svelte-lsp-bug
[21:00:15  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
	Initialize new ts service at  /home/titoubiz/Desktop/svelte-lsp-bug/tsconfig.json
[21:00:15  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
	Trying to load configs for /home/titoubiz/Desktop/svelte-lsp-bug
[21:00:15  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
	Loaded config at  /home/titoubiz/Desktop/svelte-lsp-bug/svelte.config.js
[21:00:15  Serveur LSP Journal] svelte@/home/titoubiz/Desktop/svelte-lsp-bug
	SnapshotManager File Statistics:
	Project files: 7
	Svelte files: 1
	From node_modules: 0
	Total: 7

I just noticed that the number of project files is different, don’t know where it can come from.

Anyway, for this example I let the default tsconfig.json on project creation:

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"rewriteRelativeImportExtensions": true,
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler",
		"preserveSymlinks": false,
		"verbatimModuleSyntax": true
	}
}

And my complete project structure is:

svelte-lsp-bug
├── node_modules
│   ├── ...
├── package.json
├── src
│   ├── lib
│   │   └── example.ts
│   ├── test.svelte
│   └── test.ts
├── svelte.config.js
├── .svelte-kit
│   ├── ambient.d.ts
│   ├── non-ambient.d.ts
│   ├── tsconfig.json
│   └── types
│       ├── route_meta_data.json
│       └── src
│           └── routes
│               └── $types.d.ts
├── tsconfig.json
└── vite.config.ts

[jasonlyu123]

Hmm. It seems like the workspaceFolders passed by Kate are the resolved path. But the document file path is the symlinked path. Kind of strange for this inconsistency.