Vite/Vue3中使用verusd-rpc-ts-client库遇Node模块兼容错误

背景 #

我正在Vite/Vue3+TypeScript项目中开发RPC功能，引入的依赖为：

"verusd-rpc-ts-client": "git+https://github.com/VerusCoin/verusd-rpc-ts-client.git",

该库在普通Vue JS项目中可正常运行，但在Vite环境下运行时抛出一系列浏览器兼容性相关错误。

报错信息 #

Module "util" has been externalized for browser compatibility. Cannot access "util.debuglog" in client code.
get @ verusd-rpc-ts-client.js?v=63353c53:4935
Show 1 more frame
Show less
verusd-rpc-ts-client.js?v=63353c53:4935 Module "util" has been externalized for browser compatibility. Cannot access "util.inspect" in client code.
get @ verusd-rpc-ts-client.js?v=63353c53:4935
Show 1 more frame
Show less
verusd-rpc-ts-client.js?v=63353c53:9155 Module "stream" has been externalized for browser compatibility. Cannot access "stream.Transform" in client code.
get @ verusd-rpc-ts-client.js?v=63353c53:9155
Show 1 more frame
Show less
verusd-rpc-ts-client.js?v=63353c53:9292 Module "buffer" has been externalized for browser compatibility. Cannot access "buffer.Buffer" in client code.
get @ verusd-rpc-ts-client.js?v=63353c53:9292
Show 1 more frame
Show less
verusd-rpc-ts-client.js?v=63353c53:12567 Uncaught ReferenceError: Buffer is not defined
    at node_modules/verus-typescript-primitives/dist/constants/vdxf.js (verusd-rpc-ts-client.js?v=63353c53:12567:63)
    at __require (chunk-RSJERJUL.js?v=63353c53:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/index.js (verusd-rpc-ts-client.js?v=63353c53:13773:18)
    at __require (chunk-RSJERJUL.js?v=63353c53:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/classes/Challenge.js (verusd-rpc-ts-client.js?v=63353c53:14025:15)
    at __require (chunk-RSJERJUL.js?v=63353c53:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/classes/index.js (verusd-rpc-ts-client.js?v=63353c53:15656:23)
    at __require (chunk-RSJERJUL.js?v=63353c53:3:50)
    at node_modules/verus-typescript-primitives/dist/index.js (verusd-rpc-ts-client.js?v=63353c53:16165:18)
    at __require (chunk-RSJERJUL.js?v=63353c53:3:50)

诉求 #

虽然可以直接通过URL发起RPC调用，但希望能直接使用该库，以便后续将库的变更作为子模块集成到代码中。

代码示例 #

RPC代理文件（proxyVerusd.js） #

import { VerusdRpcInterface } from 'verusd-rpc-ts-client'

const verusd = VerusdRpcInterface("iJhCezBExJHvtyH3fGhNnt2NhU4Ztkf2yq", "https://api.verustest.net");

export const fetchConversion = async () => {
  const res = await verusd.getCurrency('bridge.veth')
  const info = await verusd.getInfo()

  const block = info.result.longestchain

  const bestState = res.result.bestcurrencystate
  const currencyNames = res.result.currencynames
  const currencies = bestState.reservecurrencies
  const count = currencies.length
  const { supply } = bestState
  const daiKey = Object.keys(res?.result?.currencynames).find((key) => currencyNames !== undefined && currencyNames[key] === 'DAI.vETH')
  const daiAmount = currencies.find(c => c.currencyid === daiKey).reserves

  let list = currencies.map((token) => ({ name: currencyNames[token.currencyid], amount: token.reserves, daiPrice: daiAmount / token.reserves }))
  const bridge = { name: 'Bridge.vETH', amount: supply, daiPrice: (daiAmount * count) / supply }

  let conversions = [
    { symbol: 'vrsc', price: 0 },
    { symbol: 'eth', price: 0 },
    { symbol: 'mkr', price: 0 },
    { symbol: 'dai', price: 0 }
  ]

  try {
    conversions = await Promise.all(
      urls.map(async (url) => fetch(url)
        .then((res) => res.json())
        .then((c) => ({
          symbol: c.symbol,
          price: c.market_data.current_price.usd
        })))
    )
  } catch (error) {
    // eslint-disable-next-line no-console
    console.error('%s: fetching prices %s', Date().toString(), error)
  }
  list = list.map((token) => {
    switch (token.name) {
      case 'VRSCTEST':
      case 'VRSC':
        return {
          ...token,
          price: conversions.find((c) => c.symbol === 'vrsc')?.price
        }
      case 'vETH':
        return {
          ...token,
          price: conversions.find((c) => c.symbol === 'eth')?.price
        }
      case 'DAI.vETH':
        return {
          ...token,
          price: 1
        }
      case 'MKR.vETH':
        return {
          ...token,
          price: conversions.find((c) => c.symbol === 'mkr')?.price
        }
      default:
        return { ...token }
    }
  })
  return { list, bridge, currencies }
}

export const fetchCurrency = async (currency) => {
  try {
    const response = await verusd.getCurrency(currency);
    return response;
  } catch (error) {
    console.error("Error fetching currency:", error);
    throw error;
  }
};

export const fetchInfo = async () => {
  try {
    const response = await verusd.getInfo();
    return response;
  } catch (error) {
    console.error("Error fetching info:", error);
    throw error;
  }
};

Vue组件使用代码 #

<script>
import { fetchInfo, fetchConversion } from "./utils/proxyGet"; 

export default {
  name: 'VerusCurrencies',
  async mounted() {
    await this.getConsole();
  },
  methods: {
    async getConsole() {
      try {
        //const res = await fetchCurrency("Bridge.vEth");
        const info = await fetchInfo();
        const getCon = await fetchConversion();
 
        //console.log(res);
        console.log(info);
        console.log(getCon);
      } catch (error) {
        console.log("Cannot get data")
      }
    },
  }
}
</script>

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