SvelteKit项目无法导入Onboard.js，多轮调整后仍报错如何解决？

问题修复方案 #

按以下步骤依次操作即可解决报错：

1. 适配SvelteKit服务端渲染机制

bnc-onboard是纯浏览器端库，依赖大量浏览器专属API，无法在服务端渲染阶段执行，需调整导入逻辑：

• 方案A：使用动态导入，仅在客户端挂载后加载

// __layout.svelte
import { onMount } from 'svelte'

let Onboard
onMount(async () => {
  // 动态导入仅在浏览器端执行
  const onboardModule = await import('bnc-onboard')
  Onboard = onboardModule.default
  // 在此处执行Onboard初始化逻辑
})

• 方案B：直接禁用当前路由的服务端渲染（适合全栈都是客户端逻辑的场景）
  在__layout.svelte顶部添加如下代码：

<script context="module">
  export const ssr = false
</script>

2. 替换兼容Vite的Node Polyfill配置

你之前使用的rollup-plugin-node-polyfills和Vite兼容性较差，需替换为Vite专属的polyfill插件：

1. 安装依赖：

pnpm install -D vite-plugin-node-polyfills

2. 调整svelte.config.js配置：

import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default {
  kit: {
    vite: {
      plugins: [
        nodePolyfills({
          include: ['buffer', 'process', 'util', 'crypto', 'stream', 'http', 'https'],
          globals: {
            Buffer: true,
            process: true
          }
        })
      ],
      // 预构建CommonJS依赖，解决模块解析问题
      optimizeDeps: {
        include: ['bnc-onboard', 'u2f-api', '@keystonehq/bc-ur-registry']
      }
    }
  }
}

3. 解决pnpm peer依赖缺失问题

pnpm默认不会自动安装 peer 依赖，是导致你安装完仍缺模块的核心原因：

1. 在项目根目录新建/编辑.npmrc文件，添加如下配置：

auto-install-peers=true

2. 删除项目下的node_modules文件夹和pnpm-lock.yaml文件，重新执行安装命令：

pnpm install

4. 重启开发服务验证

执行如下命令启动开发服务，强制Vite清空缓存重新构建：

pnpm dev -- --force

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