Issue
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
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
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/@sveltejs+kit@2.0.0_@sveltejs+vite-plugin-svelte@3.0.0_svelte@4.2.7_vite@5.0.3/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
}
Answered By - Ryan Cargan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.