SvelteKit中无法将Navbar组件导入+layout.svelte的问题

以下是针对该导入解析错误的具体解决步骤：

1. 使用SvelteKit默认路径别名导入组件 #

SvelteKit默认配置了$lib作为src/lib目录的别名，直接使用这个别名可避免路径解析问题。修改+layout.svelte中的导入语句：

<script lang="ts">
 import Navbar from "$lib/components/ui/navbar.svelte";
</script>

2. 核对文件路径与文件名 #

• 确认navbar.svelte的位置严格对应src/lib/components/ui/navbar.svelte，注意文件名和目录名的大小写（Vite对路径大小写敏感，即使是Windows系统）。
• 检查+layout.svelte的存放路径是否为src/routes/+layout.svelte——报错信息中显示的src\routes+layout.svelte路径有误，应该是routes目录下的+layout.svelte，而非routes+layout.svelte这个文件名。

3. 验证tsconfig.json的路径配置 #

打开项目根目录的tsconfig.json，确保compilerOptions.paths中包含$lib的别名配置：

{
  "compilerOptions": {
    // 其他配置...
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"]
    }
  }
}

如果缺少该配置，添加后保存，然后重启开发服务器。

4. 重启开发服务器 #

Vite的缓存可能导致路径解析异常，停止当前的开发服务，重新运行npm run dev或pnpm dev启动服务。

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