Search code examples
typescriptvisual-studio-codeintellisensesveltekitmonorepo

Intellisense error in VS Code until app.d.ts is open in editor

Setup

VS Code with a SvelteKit project.

package.json:

{
    "name": "skit",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "devDependencies": {
        "@iconify/json": "^2.2.160",
        "@playwright/test": "^1.28.1",
        "@skeletonlabs/skeleton": "^2.6.1",
        "@skeletonlabs/tw-plugin": "^0.3.0",
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/adapter-node": "^2.0.1",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@tailwindcss/forms": "^0.5.7",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "autoprefixer": "^10.4.16",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "^8.4.32",
        "postcss-load-config": "^5.0.2",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "prettier-plugin-tailwindcss": "^0.5.9",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "sveltekit-superforms": "^1.12.0",
        "tailwindcss": "^3.3.6",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "unplugin-auto-import": "^0.17.2",
        "unplugin-icons": "^0.18.1",
        "vite": "^5.0.3",
        "vite-plugin-svelte-console-remover": "^1.0.10",
        "vitest": "^1.0.0",
        "zod": "^3.22.4"
    },
    "type": "module"
}

vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vitest/config'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import removeConsole from 'vite-plugin-svelte-console-remover'

export default defineConfig({
    plugins: [
        sveltekit(),
        AutoImport({
            resolvers: [
                IconsResolver({
                    prefix: 'Icon',
                    extension: 'svelte',
                }),
            ],
        }),
        Icons({
            compiler: 'svelte',
        }),
        removeConsole('log'),
    ],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}'],
    },
})

Error

enter image description here

Error text when mousing over import { sveltekit } from '@sveltejs/kit/vite': Cannot find module '@sveltejs/kit/vite' or its corresponding type declarations.ts(2307).

Ctrl + Click also doesn't work on the blue import.

More Context

skit which containts this vite.config.ts is just one subfolder in a larger multi-project git repo. I open the whole thing in VS Code normally, not just the subfolder for numerous reasons.

Partial Fix

enter image description here

Opening the project's src/app.d.ts file (in the editor) with this '@sveltejs/kit' import added:

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
import '@sveltejs/kit'
import 'unplugin-icons/types/svelte'

declare global {
    namespace App {}
}

export {}

Now Ctrl + Click also correctly navigates me to skit/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/exports/vite/index.js.

Problem with Partial Fix

The error comes back whenever there is a reload of the editor window or the TS server until the file with the type import is opened again.

Version Info

Version: 1.84.2
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:50:47.800Z
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Linux x64 6.1.66
Solution

  • Adding "src/**/*" to the include array in tsconfig.json seemed to fix it:

    {
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler"
        // "rootDirs": ["./.svelte-kit"]
    },
    "include": ["./auto-imports.d.ts", "src/**/*"]
    // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
    //
    // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
    // from the referenced tsconfig.json - TypeScript does not merge them in
}