如何配置SvelteKit使用兼容Edge的npm包进行构建？

问题 #

如何让SvelteKit在构建时使用兼容Edge运行时的npm包版本？比如使用Jose做JWT认证时，在Vercel Edge环境下出现buffer、crypto、util、zlib等Node内置模块找不到的构建错误。

报错信息 #

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-vercel
✘ [ERROR] Could not resolve "buffer"

    .svelte-kit/output/server/chunks/auth.js:3:23:
      3 │ import { Buffer } from "buffer";
        ╵                        ~~~~~~~~

  The package "buffer" wasn't found on the file system but is built into node. Are you
  trying to bundle for node? You can use "platform: 'node'" to do that, which will remove
  this error.

解决方案 #

1. 强制指定npm包的Edge兼容入口 #

修改svelte.config.js，通过Vite配置强制使用Jose的浏览器/Edge兼容版本，避免拉取Node环境的代码：

import adapter from '@sveltejs/adapter-vercel'
import { vitePreprocess } from '@sveltejs/kit/vite'

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

    kit: {
        adapter: adapter({
            runtime: 'edge',
        }),
    },
    vite: {
        resolve: {
            alias: {
                // 指定Jose的Edge兼容入口文件
                'jose': 'jose/dist/browser/index.js'
            }
        },
        optimizeDeps: {
            include: ['jose']
        }
    }
}

export default config

2. 补充Edge缺失的全局模块（可选） #

如果仍有buffer、crypto等模块报错，安装并配置polyfill插件：
首先安装依赖：

npm install @esbuild-plugins/node-globals-polyfill --save-dev

然后更新Vite配置：

import adapter from '@sveltejs/adapter-vercel'
import { vitePreprocess } from '@sveltejs/kit/vite'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'

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

    kit: {
        adapter: adapter({
            runtime: 'edge',
        }),
    },
    vite: {
        resolve: {
            alias: {
                'jose': 'jose/dist/browser/index.js'
            }
        },
        optimizeDeps: {
            include: ['jose'],
            esbuildOptions: {
                define: {
                    global: 'globalThis'
                },
                plugins: [
                    NodeGlobalsPolyfillPlugin({
                        buffer: true,
                        crypto: true,
                        util: true,
                        zlib: true
                    })
                ]
            }
        }
    }
}

export default config

3. 确认代码使用Edge兼容API #

确保代码中只使用Jose的浏览器/Edge兼容方法，避免调用Node特有的API（如直接引入buffer模块），优先使用Jose内置的工具函数。

原因说明 #

SvelteKit默认打包时会优先读取npm包的Node环境入口，但Edge运行时不支持Node的内置模块。通过指定包的Edge兼容入口+补充必要polyfill，可以让构建产物适配Edge环境。

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