Problem with kit.alias for $types

teneon commented 2 weeks ago

Describe the bug

When attempting to use kit.alias to set aliases for TypeScript types in the .svelte-kit/types/src/routes directory, TypeScript fails to recognize these aliases unless baseUrl is explicitly set in tsconfig.json. However, setting baseUrl directly conflicts with SvelteKit's built-in behavior of generating tsconfig.json, leading to a warning against such modifications. This creates a challenging scenario where users are unable to utilize custom aliases for auto-generated types, impacting development workflow and code organization.

Reproduction

Initialize a standard SvelteKit project with TypeScript enabled.
Modify svelte.config.js and add an alias to the kit configuration as follows:
```
kit: {
alias: {
$routes: '.svelte-kit/types/src/routes'
}
}
```
In my HeaderLeft.svelte component, which is located here: "src/lib/layouts/main/HeaderLeft.svelte" By using the added "$routes" alias, the import seems to works properly: import type { LayoutData } from '$routes/[[lang=langCode]]/$types';

Without alias i need to import it relative like this and it is cumbersome: import type { LayoutData } from '../../../routes/[[lang=langCode]]/$types';

The issue is that if i add that alias, i also get VSCode error tsconfig.json: Non-relative paths are not allowed when 'baseUrl' is not set. Did you forget a leading './'?
If i add baseUrl to the tsconfig.json i get a warning when i do "npm run dev" i get the following message: "You have specified a baseUrl and/or paths in your tsconfig.json which interferes with SvelteKit's auto-generated tsconfig.json. Remove it to avoid problems with intellisense. For path aliases, use kit.alias instead: https://kit.svelte.dev/docs/configuration#alias"

So this surely isn't the right way.

I have also tried different alias paths to see if it might work, but it didn't work. $routes: './svelte-kit/types/src/routes' $routes: './.svelte-kit/types/src/routes' and so on... Either the import via $route didn't resolve anymore or if "." is added in front then i get the other error message: "Non-relative paths are not allowed when 'baseUrl' is not set."

I am not sure if this is a bug / a missing feature or if i don't understand something and i am doing it totally wrong. Please help! Thank you in advance! :)

best regards, Jim

Logs

npm run dev -- --host

> project@0.0.1 dev
> vite dev --host

You have specified a baseUrl and/or paths in your tsconfig.json which interferes with SvelteKit's auto-generated tsconfig.json. Remove it to avoid problems with intellisense. For path aliases, use `kit.alias` instead: https://kit.svelte.dev/docs/configuration#alias

  VITE v5.2.8  ready in 984 ms

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 103.54 GB / 125.69 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.1/bin/npm
  Browsers:
    Chrome: 123.0.6312.86
  npmPackages:
    @sveltejs/adapter-auto: ^3.2.0 => 3.2.0 
    @sveltejs/kit: ^2.5.5 => 2.5.5 
    svelte: ^4.2.12 => 4.2.12 
    vite: ^5.2.8 => 5.2.8

Severity

annoyance

Additional Information

No response

Rishab49 commented 1 day ago

using "$types":"/.svelte-kit/types/src/routes" solves the issue for me.

eltigerchino commented 14 hours ago

The issue is caused by this line https://github.com/sveltejs/kit/blob/0fee61c571db253921d1a6503fc879235c6f3b60/packages/kit/src/core/sync/write_tsconfig.js#L212 that strips the ".svelte-kit/" from ".svelte-kit/types/src/routes". Hence, you end up with $routes: "types/src/routes" in the generated tsconfig.json which is a non-relative path and causes the tsconfig.json error. You can see this in .svelte-kit/tsconfig.json.

sveltejs / kit