I am getting a buffer error when using a Typescript RPC library in Vite, Vue

I am using a typescript library that does RPC calls for a blockchain. I am trying to use it in my Javascript and Vue project with Vite bundler.

I have tried install polyfills, buffer etc but somehow I still get the error mentioned below.

This is the library : 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

Usage:

This is a connect.js script

// 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
  }
}

This is my 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>

Solution

For anyone encountering this problem the following configuration might help.

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

Open up the vite-config.js file

// 
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'] })
  ],
})

The same configuration will work for react or any framework using vite bundler