SvelteKit中使用svelte-spa-router遭遇Invalid component object错误排查求助

这个问题我之前也碰到过，核心原因是svelte-spa-router是为纯客户端SPA设计的，而SvelteKit默认开启SSR（服务器端渲染），两者的运行环境和路由逻辑完全不匹配，才会抛出组件对象无效的错误。下面给你两种解决方案，优先推荐第一种：

方案一：改用SvelteKit自带的文件系统路由（推荐） #

SvelteKit本身已经内置了一套强大的路由系统，完全不需要额外引入spa-router，你的项目文件结构其实已经完美符合它的路由规范了。

操作步骤： #

1. 简化你的__layout.svelte，删掉所有spa-router相关代码，用SvelteKit原生的<slot />渲染子路由：

<script>
 import Navbar from "$lib/Navbar.svelte";
 import Sidebar from "$lib/Sidebar.svelte";
</script>

<Navbar />
<Sidebar />
<slot />

<style>
 /* 保留你的布局样式 */
</style>

2. 路由自动匹配规则：
   • / 对应 src/routes/index.svelte
   • /about 对应 src/routes/about/index.svelte
   • /test 对应 src/routes/Test.svelte（更规范的做法是改成src/routes/test/index.svelte）
3. 页面导航用SvelteKit原生方式：
   • 静态链接用 <a href="/about" rel="prefetch">About</a>
   • 编程式导航用 import { goto } from '$app/navigation'; goto('/contact')

这种方式能充分利用SvelteKit的SSR、静态生成、路由参数等核心特性，是官方推荐的最佳实践。

方案二：强行适配svelte-spa-router（不推荐） #

如果你非要用spa-router，必须解决SSR环境下的浏览器API依赖问题，确保所有路由逻辑只在客户端执行：

修改__layout.svelte代码： #

<script>
 import Navbar from "$lib/Navbar.svelte";
 import Sidebar from "$lib/Sidebar.svelte";
 import { onMount } from 'svelte';

 // 延迟加载Router和路由组件，只在客户端执行
 let Router;
 let routes = {};

 onMount(async () => {
   // 客户端加载spa-router
   Router = (await import('svelte-spa-router')).default;
   // 动态导入所有路由组件，确保在客户端环境下解析
   routes = {
     '/': (await import('./index.svelte')).default,
     '/about': (await import('./about/index.svelte')).default,
     '/contact': (await import('./contact/index.svelte')).default,
     '/products': (await import('./products/index.svelte')).default,
     '/test': (await import('./Test.svelte')).default
   };
 });
</script>

<Navbar />
<Sidebar />

{#if Router}
 <!-- 只有客户端加载完Router后才渲染 -->
 <Router {routes} />
{/if}

<style>
</style>

可选：禁用SSR（彻底转为SPA） #

如果还是有浏览器API报错，可以在src/routes/+layout.js中禁用整个应用的SSR：

// src/routes/+layout.js
export const ssr = false;

但这样会完全失去SvelteKit的SSR优势，不建议在生产环境使用。

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