在SvelteKit server load函数返回组件报错，求可行解决方案

我是SvelteKit新手，想把导航菜单配置从客户端组件迁移到服务端load()函数，让服务端决定显示哪些菜单项，但尝试返回Svelte组件时遇到了序列化错误。

当前可正常运行的实现 #

// routes/+layout.svelte
<script>
    import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from "@babeard/svelte-heroicons/mini";
    import NavMenu from "@components/NavMenu.svelte";

    const menuSettings = {
        menuButtonIcon: UserCircleIcon,
        menuItems: [
            {title: 'Settings', icon: Cog6ToothIcon, url: '/app/settings', current: false},
            {title: 'Sign Out', icon: ArrowLeftOnRectangleIcon, url: '/app/sign-out', current: false},
        ]
    }
</script>

<NavMenu {...menuSettings} />
<slot />

迁移后无法运行的代码 #

客户端+layout.svelte #

<!-- routes/+layout.svelte -->
<script>
    import NavMenu from "@components/NavMenu.svelte";

    export let data;
</script>

<NavMenu {...data.menuSettings} />
<slot />

服务端+layout.server.js #

// routes/+layout.server.js
import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from "@babeard/svelte-heroicons/mini";

export function load() {
    return {
        menuSettings: {
            menuButtonIcon: UserCircleIcon,
            menuItems: [
                {title: 'Settings', icon: Cog6ToothIcon, url: '/app/settings', current: false},
                {title: 'Sign Out', icon: ArrowLeftOnRectangleIcon, url: '/app/sign-out', current: false},
            ]
        }
    }
}

报错信息 #

Error: Data returned from `load` while rendering / is not serializable: Cannot stringify a function (data.menuSettings.menuButtonIcon)

解决方案 #

核心结论 #

不能从服务端load()函数直接返回组件。因为服务端返回的data需要序列化为JSON传递给客户端，而Svelte组件本质是函数/类实例，无法被JSON序列化，这就是报错的根本原因。

最佳处理方案 #

服务端返回组件的字符串标识，客户端提前导入所有可能用到的组件，通过映射表将标识转换为实际组件：

1. 修改服务端+layout.server.js，返回图标名称字符串：

// routes/+layout.server.js
export function load() {
    return {
        menuSettings: {
            menuButtonIcon: 'UserCircleIcon',
            menuItems: [
                {title: 'Settings', icon: 'Cog6ToothIcon', url: '/app/settings', current: false},
                {title: 'Sign Out', icon: 'ArrowLeftOnRectangleIcon', url: '/app/sign-out', current: false},
            ]
        }
    }
}

2. 修改客户端+layout.svelte，导入所有图标并创建映射表：

<!-- routes/+layout.svelte -->
<script>
    import NavMenu from "@components/NavMenu.svelte";
    import {ArrowLeftOnRectangleIcon, Cog6ToothIcon, UserCircleIcon} from "@babeard/svelte-heroicons/mini";

    export let data;

    // 图标组件映射表
    const iconMap = {
        UserCircleIcon,
        Cog6ToothIcon,
        ArrowLeftOnRectangleIcon
    };

    // 转换服务端返回的配置
    const processedMenuSettings = {
        ...data.menuSettings,
        menuButtonIcon: iconMap[data.menuSettings.menuButtonIcon],
        menuItems: data.menuSettings.menuItems.map(item => ({
            ...item,
            icon: iconMap[item.icon]
        }))
    };
</script>

<NavMenu {...processedMenuSettings} />
<slot />

额外说明 #

• 这种方式既保留了服务端控制菜单显示逻辑的能力，又规避了序列化问题
• 后续新增图标时，只需在服务端返回新的标识，同时在客户端的iconMap中添加对应组件即可
• 可以将iconMap抽成单独的工具文件，方便多个组件复用

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