SvelteKit项目构建时无法导入$lib文件：ENOENT文件不存在错误

问题详情 #

执行npm run build时触发错误：

[vite:load-fallback] Could not load "path\to\project\frontend\src\lib/types/pocketbase": (imported by src/routes/add-games/+page.server.ts) ENOENT: no such file or directory , open 'path\to\project\frontend\src\lib\types\pocketbase'

当前导入语句：

import { SomeEnum } from '$lib/types/pocketbase';

实际对应文件路径为frontend\src\lib\types\pocketbase.d.ts

额外异常现象：

• 开发环境npm run dev可正常运行
• $lib中已存在的函数导入不受影响，但新增文件/导入无效
• 尝试删除.svelte-kit文件夹、重装npm包后问题仍存在
• 错误信息中的路径混合了正反斜杠

配置文件 #

tsconfig.json #

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler"
    },
    "exclude": [
        "build",
        ".svelte-kit",
        "dist",
        "node_modules"
    ]
}

vite.config.ts #

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

svelte.config.js #

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter()
    }
};

export default config;

解决方案 #

1. 显式导入.d.ts后缀 #

TypeScript构建阶段可能无法自动解析无后缀的类型文件，修改导入语句：

import { SomeEnum } from '$lib/types/pocketbase.d.ts';

2. 配置TypeScript类型文件路径 #

在tsconfig.json的compilerOptions中添加typeRoots指定类型文件目录：

"compilerOptions": {
    // 其他原有配置...
    "typeRoots": ["./src/lib/types"]
}

或者扩展include字段确保类型文件被扫描：

"include": [
    "src/**/*",
    "src/lib/types/**/*.d.ts"
]

3. 配置Vite文件解析规则 #

在vite.config.ts中添加resolve配置，明确支持.d.ts后缀：

export default defineConfig({
    plugins: [sveltekit()],
    resolve: {
        extensions: ['.ts', '.d.ts', '.js', '.svelte']
    },
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

4. 校验文件大小写一致性 #

Windows系统文件系统不区分大小写，但构建工具可能因路径大小写不匹配导致解析失败，确保导入路径的大小写与实际文件名完全一致。

5. 彻底清理缓存后重建 #

执行以下命令清理所有缓存和依赖，重新安装后构建：

rm -rf .svelte-kit build node_modules
npm install
npm run build

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