Problem with kit.alias for $types

[teneon]

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

1. Initialize a standard SvelteKit project with TypeScript enabled.
2. Modify svelte.config.js and add an alias to the kit configuration as follows:

kit: {
  alias: {
    $routes: '.svelte-kit/types/src/routes'
  }
}

3. 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';

4. 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 './'?

5. 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.

6. 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]

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

[teemingc]

The issue is caused by this line

kit/packages/kit/src/core/sync/write_tsconfig.js

Line 212 in 0fee61c

const rel_path = config_relative(remove_trailing_slashstar(value));

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.

[ivodolenc]

Hi @eltigerchino , I just bumped into this as well, since page.data from '$app/state' isn't typed automatically, we currently have to manually type this which is a real pain.

So I would like to do something like this to speed up dev process:

Working as expected:

<!-- src/components/name/file.svelte -->

<script lang="ts">
  import { page } from '$app/state'
  import type { PageData } from '../../routes/./$types' // confusing and hard to maintain if we have nested folders

  const { app } = page.data as PageData
</script>

Not working as expected:

import adapter from '@sveltejs/adapter-static'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      fallback: '404.html',
    }),
    alias: {
      $types: '.svelte-kit/types/src/routes',
    },
  },
}

export default config

<!-- src/components/name/file.svelte -->

<script lang="ts">
  import { page } from '$app/state'
  import type { PageData } from '$types' // fast and clean solution

  const { app } = page.data as PageData
</script>

As you mentioned above, this removes .svelte-kit from tsconfig paths.

.svelte-kit/tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "$types": ["./types/src/routes"],
      "$types/*": ["./types/src/routes/*"]
    },
    "rootDirs": ["..", "./types"]
  }
}

What is the status of this, can we expect it to be fixed in the next release or?

I would also like to mention that I spent a good hour researching why it wasn't working, only to eventually come across this issue here.

[vladshcherbin]

@ivodolenc working fine for me in the latest version:

autogenerated:

[ivodolenc]

Hi @vladshcherbin thanks for info, I'm using version:

• @sveltejs/kit: 2.17.3

With this config:

// svelte.config.js

import adapter from '@sveltejs/adapter-static'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      fallback: '404.html',
    }),
    alias: {
      $: 'src', // works fine, import { Component } from '$/components'
      $types: '.svelte-kit/types/src/routes', // not working, import type { PageData } from '$types'
    },
  },
}

export default config

Generates this .svelte-kit/tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "$": ["../src"],
      "$/*": ["../src/*"],
      "$types": ["./types/src/routes"],
      "$types/*": ["./types/src/routes/*"]
    },
    "rootDirs": ["..", "./types"],
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "lib": ["esnext", "DOM", "DOM.Iterable"],
    "moduleResolution": "bundler",
    "module": "esnext",
    "noEmit": true,
    "target": "esnext"
  },
  "include": [
    "ambient.d.ts",
    "non-ambient.d.ts",
    "./types/**/$types.d.ts",
    "../vite.config.js",
    "../vite.config.ts",
    "../src/**/*.js",
    "../src/**/*.ts",
    "../src/**/*.svelte",
    "../tests/**/*.js",
    "../tests/**/*.ts",
    "../tests/**/*.svelte"
  ],
  "exclude": [
    "../node_modules/**",
    "../src/service-worker.js",
    "../src/service-worker/**/*.js",
    "../src/service-worker.ts",
    "../src/service-worker/**/*.ts",
    "../src/service-worker.d.ts",
    "../src/service-worker/**/*.d.ts"
  ]
}

And when I want to import from $types alias, it throws some errors:

<!-- src/components/metadata/Metadata.svelte -->

<script lang="ts">
  import { page } from '$app/state'
  import type { MetadataOptions } from './types'

  import type { PageData } from '$types' // throws error: Cannot find module '$types' or its corresponding type declarations.ts(2307)

  const { app } = page.data as PageData

  let meta: MetadataOptions = $props()
  let { facebook: fb, twitter: tw } = meta
</script>

I didnt have much time to investigate but I just tested this again and stil not working, repo is here, its a static starter.

Also, I was searching throught Svelte Discord and came across recent threads that other users had also encountered this kind of problem, there is no automatic type inference for code outside of pages, and someone suggested to use the main app.d.ts file (I didn't know about this), which is actually a much simpler solution.

So I defined the types for the global layout data there (app.d.ts) and it works fine as expected, no need for additional aliases or imports.

// src/app.d.ts

declare global {
  namespace App {
    // interface Error {}
    // interface Locals {}

    interface PageData {
      // this can be accessed via `page.data.app`
      app: {
        name: string
        author: string
        description: string
        url: string
      }
    }

    // interface Platform {}
  }
}

export {}

[vladshcherbin]

@ivodolenc I see your alias is named as $types while mine is $routes. In my case, importing PageServerData from root src/routes folder looks like this:

<script lang="ts">
  import { PageServerData } from '$routes/$types'
</script>

Maybe you can try similar import but with your $types alias and see if it helps. It should be:

<script lang="ts">
  import { PageServerData } from '$types/$types'
</script>

This is because types are in $types.d.ts file so you need to end the path with it:

[ivodolenc]

Maybe you can try similar import but with your $types alias and see if it helps. It should be:

Exactly, this is the key, I can confirm that it works as expected, thanks for the hint:

const config = {
  kit: {
    alias: {
      $types: '.svelte-kit/types/src/routes/$types', // note suffix `/$types`
    },
  },
}

And imports works without error:

<script lang="ts">
  import type { PageData } from '$types' // no need for `$types/$types`
</script>