.svelte-kit生成的tsconfig.json中$lib路径错误问题排查

排查与修复步骤 #

1. 确认项目目录结构 #

先检查项目根目录是否符合Svelte Kit标准结构：

你的项目根目录/
├── src/
│   ├── lib/
│   └── routes/
├── .svelte-kit/
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

如果.svelte-kit不在项目根目录下（比如嵌套在子文件夹），会导致自动生成的路径出现上级目录引用错误。

2. 强制配置$lib路径映射 #

以下是正确的别名配置方式，覆盖自动生成的错误路径：

修改svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter(),
		alias: {
			$lib: './src/lib' // 明确指定当前目录下的src/lib
		}
	}
};

export default config;

同步tsconfig.json配置

确保项目根目录的tsconfig.json中compilerOptions.paths与上面的别名一致：

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"paths": {
			"$lib": ["./src/lib"],
			"$lib/*": ["./src/lib/*"]
		}
	}
}

3. 清理缓存并重启服务 #

修改配置后必须彻底清理缓存，让配置重新生成：

• 删除.svelte-kit文件夹
• 运行npm run dev -- --clear（或对应包管理工具的命令，如pnpm dev --clear）强制清理Vite缓存并重启开发服务

4. 升级Svelte Kit版本 #

你当前使用的@sveltejs/kit@1.1.1属于较旧版本，可能存在路径解析的已知bug。尝试升级到最新稳定版：

npm install @sveltejs/kit@latest

升级后重复步骤3清理缓存重启服务。

5. 检查Vite配置正确性 #

如果以上步骤无效，确认vite.config.ts中的别名配置没有冲突：

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
	plugins: [sveltekit()],
	resolve: {
		alias: {
			$lib: '/src/lib' // 确保指向正确的src/lib路径
		}
	}
};

export default config;

内容的提问来源于stack exchange，提问作者ddww