react/preact: TypeError: crypto_1.createHmac is not a function

[for04]

getBalance error: TypeError: crypto_1.createHmac is not a function

 signMessage node-support.ts:4
    __awaiter binance_lib_usdm-client.js:3166
    __awaiter binance_lib_usdm-client.js:3148
    signMessage binance_lib_usdm-client.js:3173
    signRequest BaseRestClient.ts:292
    __awaiter binance_lib_usdm-client.js:3853
    __awaiter binance_lib_usdm-client.js:3835
    signRequest binance_lib_usdm-client.js:4024
    _call BaseRestClient.ts:183
    fulfilled binance_lib_usdm-client.js:3838
    promise callback*step binance_lib_usdm-client.js:3851
    __awaiter binance_lib_usdm-client.js:3853
    __awaiter binance_lib_usdm-client.js:3835
    _call binance_lib_usdm-client.js:3962
    getPrivate BaseRestClient.ts:115
    getBalance usdm-client.ts:267
    <anonymous> Preact
binance.tsx:17:16
    Preact 2
        <anonymous>
        (Async: promise callback)
    <anonymous>

[tiagosiebler]

Are you using webpack? You can swap out a dependency to one that works in browsers, though I'm not sure if you can do this if you're importing this module:
https://github.com/tiagosiebler/binance/blob/master/webpack/webpack.config.js#L22-L23

The signing process relies on createHmac(), but in the browser you can use window.crypto.subtle.sign instead:
https://github.com/tiagosiebler/binance/blob/master/src/util/browser-support.ts#L12

[for04]

Are you using webpack?

I'm using vite/preact setup which uses esbuild and rollup. Could this be an outcome, if vite/preact already uses crypto module?

[tiagosiebler]

Are you using webpack?

I'm using vite/preact setup which uses esbuild and rollup. Could this be an outcome, if vite/preact already uses crypto module?

it shouldn't be but I'm not sure why it's undefined in that scenario. Do esbuild/rollup have something to swap out module dependencies, like webpack does in the link I shared above? Not sure if that works for imported modules though... otherwise it may be necessary to expose a way to pass your own createHmac function.

Btw you will be using this frontend, right? Do you have a solution planned for CORS? Binance's APIs aren't configured for it, so most requests will fail the browser's preflight CORS check, preventing you from making API calls to binance.

[for04]

Do esbuild/rollup have something to swap out module dependencies, like webpack does in the link I shared above?

There's official support for resolve.alias plugin-alias though syntax looks different from webpack's.

Not sure if that works for imported modules though... otherwise it may be necessary to expose a way to pass your own createHmac function.

If above wont work how can i do that without making a conflict?

Btw you will be using this frontend, right?

Yes. I'm also figuring out how to use your other repo Ftx-Api for a frontend UI. Both throws Hmac error. Currently I'm bypassing CORS with browser plugin (excuse me for newbie stuff :D) but Planning to serve files with nginx for prod.

Even though Binance pulls non-auth server data after `hmac error but Ftx-api doesn't.

[tiagosiebler]

If above wont work how can i do that without making a conflict?

Not sure how to approach it... we could expose an optional property in the constructor parameters, where you could provide a callback function to generate the hmac your own way. Then this part of the library could use the provided hmac function instead of the native one, if it's provided. Seems hacky though. Open to other ideas to enhance this.

Yes. I'm also figuring out how to use your other repo Ftx-Api for a frontend UI. Both throws Hmac error.
Even though Binance pulls non-auth server data after `hmac error but Ftx-api doesn't.

Glad both my libraries are helpful! Not sure why you're seeing a difference between both, are you providing API credentials in one but not the other?

In the ftx client I only try to sign if there are credentials provided (lazily signing every request):
https://github.com/tiagosiebler/ftx-api/blob/master/src/util/requestWrapper.ts#L125-L133

In the binance client I only sign if the endpoint is a private one, in which case the key & secret are checked for presence.

[for04]

Not sure how to approach it... we could expose an optional property in the constructor parameters, where you could provide a callback function to generate the hmac your own way. Then this part of the library could use the provided hmac function instead of the native one, if it's provided. Seems hacky though. Open to other ideas to enhance this.

That would be awesome if hmac can be some multiple ways, specially for people who are using frameworks and if hmac func can be applied plug and play. A basic documentation can be bonus as well, i'd do this myself but i'm still learning and its overwhelming me at this time.

Also I think, you should consider about compatibility with preact/vue/svelete (vite is crazy fast dev server) for those frameworks. I might contribute with a boilerplate if i can get it working.

Glad both my libraries are helpful! Not sure why you're seeing a difference between both, are you providing API credentials in one but not the other?

Yes. both libraries shows me Hmac is not a function on PreactJS after providing api keys.

[tiagosiebler]

@for04 I had a simpler idea given how easy it is to detect the issue in your scenario. Please try the latest release. This is the PR if you're curious - it's just a simple fallback if createHmac is not a function.

Also I think, you should consider about compatibility with preact/vue/svelete (vite is crazy fast dev server) for those frameworks. I might contribute with a boilerplate if i can get it working.

If it universally makes integration easier for other devs, I'd love to improve compatibility but I also don't have the bandwidth to cover every use case. Contributions are therefore very welcome.

[for04]

@tiagosiebler
Thank you!
That worked like a charm. Good work.

If it universally makes integration easier for other devs, I'd love to improve compatibility but I also don't have the bandwidth to cover every use case. Contributions are therefore very welcome.

And it's understandable.

[tiagosiebler]

Nice! Glad to hear. I'll close this for now as the main issue seems resolved.