在Vercel部署带GunJS认证的SvelteKit应用时遇模块缺失错误

问题根源 #

GunJS的sea.js等模块在Node.js环境中尝试导入./lib/text-encoding，但Vercel的服务器端运行环境对模块路径解析存在兼容问题；同时你的代码在服务器端执行时，sessionStorage不存在也会引发隐性错误，叠加导致500内部服务器错误。

方案1：区分客户端/服务器端执行（推荐） #

SvelteKit提供browser变量判断代码运行环境，只在浏览器端初始化GunJS，避免服务器端加载引发的模块问题：

// src/lib/db.js
import { writable } from 'svelte/store';
import { browser } from '$app/environment';

let db;
let user;
export const username = writable('');

if (browser) {
    // 动态导入GunJS及依赖，确保仅在客户端执行
    const GunModule = await import('gun');
    await import('gun/sea');
    await import('gun/axe');

    const Gun = GunModule.default;
    db = new Gun();
    user = db.user().recall({ sessionStorage: true });

    user.get('alias').on((v) => username.set(v));

    db.on('auth', async () => {
        const alias = await user.get('alias');
        username.set(alias);
    });
}

export { db, user };

方案2：Vite配置别名修正模块路径 #

通过Vite的路径别名，将GunJS内部的相对导入指向正确的文件：

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    resolve: {
        alias: {
            // 修正GunJS内部的text-encoding导入路径
            './lib/text-encoding': 'gun/lib/text-encoding/index.js'
        }
    }
});

方案3：使用CDN加载GunJS（纯浏览器环境） #

直接在客户端通过CDN加载GunJS，完全避开服务器端的模块解析问题：

<!-- src/routes/+layout.svelte -->
<script>
import { onMount } from 'svelte';
import { writable } from 'svelte/store';

export const username = writable('');

onMount(async () => {
    // 加载CDN版本的GunJS
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/gun/gun.js';
    document.body.appendChild(script);
    
    await new Promise(resolve => script.onload = resolve);

    // 加载额外依赖
    await import('gun/sea');
    await import('gun/axe');

    const Gun = window.Gun;
    const db = new Gun();
    const user = db.user().recall({ sessionStorage: true });

    user.get('alias').on((v) => username.set(v));

    db.on('auth', async () => {
        const alias = await user.get('alias');
        username.set(alias);
    });
});
</script>

验证方法 #

1. 本地执行npm run build后运行npm run preview，模拟生产环境验证是否正常
2. 重新部署到Vercel，观察是否还出现500错误

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