Using depay/widgets with Remix.run

[arefay]

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]

Any error messages you can share?

[10xSebastian]

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]

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]

These are the errors.

Possibly a problem on Remix's side.

[arackaf]

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.

remix-run/remix#114

[arackaf]

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 :-|

remix-run/remix#2248 (comment)

[10xSebastian]

@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: 10xSebastian/remix-depay@cc136a1

Screen.Recording.2022-08-12.at.08.35.56.mov

[arackaf]

@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!

[arefay]

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