我在 Vite、Vue 中使用 Typescript RPC 库时遇到缓冲区错误

Question

我正在使用一个打字稿库，它可以对区块链进行 RPC 调用。我正在尝试通过 Vite 捆绑器在我的 Javascript 和 Vue 项目中使用它。

我已经尝试安装polyfills，缓冲区等，但不知何故我仍然收到下面提到的错误。

这是库：https://github.com/VerusCoin/verusd-rpc-ts-client

vdxf.js:11 Uncaught ReferenceError: Buffer is not defined
    at node_modules/verus-typescript-primitives/dist/constants/vdxf.js (vdxf.js:11:59)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/index.js (index.js:20:16)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/classes/Challenge.js (Challenge.js:4:13)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/classes/index.js (index.js:4:19)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/index.js (index.js:22:14)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
node_modules/verus-typescript-primitives/dist/constants/vdxf.js @ vdxf.js:11
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/vdxf/index.js @ index.js:20
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/vdxf/classes/Challenge.js @ Challenge.js:4
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/vdxf/classes/index.js @ index.js:4
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/index.js @ index.js:22
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verusd-rpc-ts-client/lib/VerusdRpcInterface.js @ VerusdRpcInterface.js:16
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verusd-rpc-ts-client/lib/index.js @ index.js:30
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
(anonymous) @ index.js:33
Show 8 more frames
Show less

用途：

这是一个 connect.js 脚本

// scripts/verusRpcInit.js
import { VerusdRpcInterface } from 'verusd-rpc-ts-client';

let verusdClient = VerusdRpcInterface("iJhCezBExJHvtyH3fGhNnt2NhU4Ztkf2yq", "http://localhost:5173");


export async function testConnection() {
  try {
    const response = await verusdClient.getBlockCount();
    return response; // or any other response you want to handle
  } catch (error) {
    console.error('Failed to connect to the Verus RPC:', error);
    throw error; // Rethrow the error to handle it in the caller
  }
}

这是我的App.vue：

    <Home/>
</template>

<script setup>
import { onMounted } from 'vue';
import Home from './components/Home.vue'
import {testConnection} from './scripts/verusRpcInit'

onMounted(async () => {
  try {
    // Call your function, for example:
    const result = await testConnection();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
});
</script>

Answer 1

对于遇到此问题的任何人，以下配置可能会有所帮助。

yarn add or npm install vite-plugin-node-polyfills

打开 vite-config.js 文件

// 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(),
    nodePolyfills({ include: ['fs', 'stream', 'buffer'] })
  ],
})

相同的配置适用于 React 或任何使用 vite bundler 的框架