search

DePayFi / widgets

💸 Payments directly into your wallet. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion and state-of-the-art widgets.
https://depay.com
MIT License
96 stars 36 forks source link

Using depay/widgets with Remix.run #62

Closed arefay closed 2 years ago

arefay commented 2 years ago

Not sure if this is the right place to ask this question, but wanted to check if anyone has been able to get the @depay/widgets running in a Remix.run project? I'm having little success, for one because there are no typings available, but even skipping those I'm not able to successfully compile the project.

10xSebastian commented 2 years ago

Any error messages you can share?

10xSebastian commented 2 years ago

Also if you could setup a test remix app in a fork we could work together on fixing compatibility.

I suggest you create a examples/remix folder and put it in there.

arefay commented 2 years ago

Thank you for getting back to me. I've created a bare-bones remix.run app where I'm trying to load the Depay donation widget. You can see/clone it from here: https://github.com/arefay/remix-depay

Once you run it you'll see the build errors. Apologies upfront, I'm not the most experienced dev so maybe this is something simple I'm missing, but I'm a bit stuck and would love to solve and use Depay widgets for my next project.

arackaf commented 2 years ago

These are the errors.

Possibly a problem on Remix's side.

image
arackaf commented 2 years ago

This appears to be the relevant issue in Remix. The root problem is that @depay/widgets imports some other @depay/ utilities, which themselves import "buffer" and some other node built-ins, which Remix doesn't seem to like.

https://github.com/remix-run/remix/issues/114

arackaf commented 2 years ago

Chance's comment here is illuminating. It sounds like this is a known issue with Remix, and it doesn't sound like there's any kind of fix.

@spape is there any kind of clever way @arefay could somehow import these @depay widgets, without bringing buffer (or any other Node globals) along in the import graph?

Else I think moving to Next might be the only way forward for him :-|

https://github.com/remix-run/remix/issues/2248#issuecomment-1092847237

10xSebastian commented 2 years ago

@arackaf @arefay It's not about not bringing buffer and other Node globals into the mix. It's also not DePay's libraries that do that. It's only where the stack trace gets you. It's the libraries under the DePay libraries that bring them into the mix. Often it's very low level crypto js libraries that do that (because they want to support browser and node 🤦). And then remix loads .esm packages which are preferred by node (server side or e.g. node testing frameworks like jest) not providing node globals 🤷 - JavaScript development remains a huge mess.

The trick is to use a bundled version. See working example here: https://github.com/spape/remix-depay/commit/cc136a13a6f89685e16fc8af99ff0dde5b420800

https://user-images.githubusercontent.com/851393/184298661-a6fef82a-27ab-4f77-9ac9-2b7b18cf79fa.mov

arackaf commented 2 years ago

@spape oof - thanks a ton! I actually poked around those UMD builds, but I didn't think they'd work. The umd build for web3-client made the same import (via require) on buffer, so I assumed it would similarly fail.

Thanks so much for debugging this!

image
arefay commented 2 years ago

Thanks so much @spape and @arackaf for your help with this. Works great now!