[SOLVED] Fetch balances from Binance using NextJS, ccxt and TypeScript

Fetch balances from Binance using NextJS, ccxt and TypeScript

I'm trying to fetch balances from Binance in my NextJS 13 application, which uses the /src/app dir and TypeScript.

async function getData() {   
  const exchange = new ccxt.binance ({
    "apiKey": "mykey",
    "secret": "mysecret",
  })
  return exchange.fetchTotalBalance()
}
 
export default async function Page() {
  const data = await getData()
  return <main>{data. Total}</main>
}

But I keep getting an error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\myapp\.next\server\static_dependencies\node-fetch\index.js' imported from D:\myapp\.next\server\app\page.js

Tried to install and import node-fetch package,didn't help. Unfortunately, there is little information about ccxt usage with React/NextJS. So, help is needed.

Solution

I asked the same question on NextJS GitHub, and @bludnic gave this solution, which I tried and seems to be working:

Solved by replacing fetch implementation of CCXT with the NextJS fetch.

import ccxt from 'ccxt'

const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args);

export default async function Page() {
  const exchange = new ccxt.binance()
  exchange.fetchImplementation = fetcher // <-

  const price = await exchange.fetchTicker('BTC/USDT')

  return <div>{JSON.stringify(price)}</div>
}

The discussion is here: https://github.com/vercel/next.js/discussions/53200