Acquire Binance account balances through NextJS, ccxt library, and TypeScript integration

Question

Acquire Binance account balances through NextJS, ccxt library, and TypeScript integration

Currently, I am attempting to retrieve balances from Binance within my NextJS 13 application, utilizing the /src/app directory along with TypeScript.

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

Unfortunately, an error keeps appearing:

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

I have tried installing and importing the node-fetch package but it did not resolve the issue. Information on using ccxt with React/NextJS is limited, so any assistance would be greatly appreciated.

typescript next.js binance ccxt

Answer 1

Answer №1

NextJS GitHub was where I turned to for help with my question, and @bludnic provided a solution that worked like a charm:

The issue was resolved by swapping out the fetch implementation of CCXT with NextJS's 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>
}

You can find the full discussion here: https://github.com/vercel/next.js/discussions/53200

Answer 2

NextJS GitHub was where I turned to for help with my question, and @bludnic provided a solution that worked like a charm:

The issue was resolved by swapping out the fetch implementation of CCXT with NextJS's 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>
}

You can find the full discussion here: https://github.com/vercel/next.js/discussions/53200

Acquire Binance account balances through NextJS, ccxt library, and TypeScript integration

Answer №1

Similar questions

An easy way to create an input field after clicking a button

Limit the elements in an array within a specified range of dates

Selecting a filter for an array of objects

Avoiding repetitive logic in both parent and child components in Angular 8

What causes the return value type in a functional interface to be loosely implemented in Typescript?

When inner pages in Next.js reload, they display the same content as the home page upon page refresh

I am looking to conceal the y-axis labels and tooltip within the react chart

When utilizing Typescript to develop a form, it is essential to ensure that the operand of a 'delete' operator is optional, as indicated by error code ts(279

Enhance the express request to include the user parameter for the passport

In development, Next.js dynamic routes function correctly, but in production they are displaying a 404 error page

Is there a method to establish a connection between my NextJS app on my phone through the local network during development similar to the way Create React App does

Creating Dynamic Navigation with Framer Motion

The recent update from Angular version 5.2 to 7 has caused issues with Post methods

Using NextJS to navigate user journey by mapping an array of values from Formik to

I am unable to access the properties of an undefined element, specifically the 'size' property in Next.js 13

Operator in RxJS that maps the elements within an array composed of multiple arrays

How does the Paginate Pipe effectively retrieve the array length in an Angular 2 application?

A step-by-step guide on executing a callback function once the animation has finished with frame-motion

Production environment is unable to display images - NextJS React application

Guide to Injecting Services with Dependencies in Angular 2 (Using Ionic 2/Angular 2/Typescript)