SvelteKit导入ccxt报ReferenceError: Buffer未定义问题求助

问题详情 #

在SvelteKit项目中导入ccxt库时触发以下错误：

ReferenceError: Buffer is not defined
    at node_modules/ccxt/js/static_dependencies/node-rsa/schemes/pkcs1.js (pkcs1.js:10:10)
    at __require (chunk-RSJERJUL.js?v=d0062138:3:50)
    at node_modules/ccxt/js/static_dependencies/node-rsa/schemes/schemes.js (schemes.js:2:12)
    at __require (chunk-RSJERJUL.js?v=d0062138:3:50)
    at node_modules/ccxt/js/static_dependencies/node-rsa/libs/rsa.js (rsa.js:12:15)
    at __require (chunk-RSJERJUL.js?v=d0062138:3:50)
    at node_modules/ccxt/js/static_dependencies/node-rsa/NodeRSA.js (NodeRSA.js:8:11)
    at __require (chunk-RSJERJUL.js?v=d0062138:3:50)
    at node_modules/ccxt/js/base/functions/crypto.js (crypto.js:8:17)
    at __require (chunk-RSJERJUL.js?v=d0062138:3:50)

重现步骤 #

1. 按标准流程初始化SvelteKit项目
2. 执行npm install ccxt安装依赖
3. 在/src/routes/+page.svelte中添加import ccxt from "ccxt"

期望结果 #

正常导入ccxt并实现基础功能，比如打印所有可用交易所列表：

import ccxt from 'ccxt';
console.log(ccxt.exchanges);

彻底解决方案 #

方案一：将ccxt限定在服务端执行（推荐） #

ccxt依赖Node.js内置API，且涉及加密交易逻辑，放在服务端运行不仅能避开客户端环境问题，还能避免API密钥暴露风险。

1. 创建服务端数据加载逻辑
   在src/routes/+page.server.js中编写：

import ccxt from 'ccxt';

export async function load() {
    // 这里可以执行任何ccxt操作
    const exchanges = ccxt.exchanges;
    return { exchanges };
}

2. 在页面组件中获取服务端数据
   修改src/routes/+page.svelte：

<script>
    // 接收服务端返回的数据
    export let data;
</script>

<h3>可用交易所列表：</h3>
<pre>{JSON.stringify(data.exchanges, null, 2)}</pre>

方案二：为客户端添加完整polyfill（仅在必须客户端使用时） #

如果确实需要在客户端运行ccxt，需要为浏览器环境补全Node.js的全局变量：

1. 安装依赖

npm install buffer process
npm install --save-dev @esbuild-plugins/node-globals-polyfill rollup-plugin-node-polyfills

2. 修改vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import nodePolyfills from 'rollup-plugin-node-polyfills';

export default defineConfig({
    plugins: [
        sveltekit(),
        // 为ccxt相关代码注入polyfill
        {
            ...nodePolyfills({
                include: ['node_modules/ccxt/**/*'],
                globals: { Buffer: true, process: true }
            }),
            enforce: 'post'
        }
    ],
    resolve: {
        alias: {
            buffer: 'buffer',
            process: 'process/browser'
        }
    },
    optimizeDeps: {
        esbuildOptions: {
            define: { global: 'globalThis' },
            plugins: [
                NodeGlobalsPolyfillPlugin({ buffer: true, process: true })
            ]
        }
    }
});

3. 在全局布局中挂载polyfill
   修改src/routes/+layout.svelte：

<script>
    import { Buffer } from 'buffer';
    import process from 'process';
    
    // 向全局对象挂载Node.js全局变量
    globalThis.Buffer = Buffer;
    globalThis.process = process;
</script>

<slot />

4. 在客户端组件中使用ccxt
   现在可以在+page.svelte中正常导入：

<script>
    import ccxt from 'ccxt';
    let exchanges = [];

    async function loadExchanges() {
        exchanges = ccxt.exchanges;
    }
</script>

<button on:click={loadExchanges}>加载交易所列表</button>
{#if exchanges.length}
    <pre>{JSON.stringify(exchanges, null, 2)}</pre>
{/if}

之前方案失败的原因 #

• 仅处理了服务端的Buffer注入，未覆盖客户端构建流程
• 缺少@esbuild-plugins/node-globals-polyfill等关键依赖，导致配置无法生效
• 客户端组件中导入ccxt前，未提前在全局挂载所需的polyfill

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