search

XRPLF / xrpl.js

A JavaScript/TypeScript API for interacting with the XRP Ledger in Node.js and the browser
https://xrpl.org/
1.2k stars 511 forks source link

Unable to use this library with svelte/rollup #1705

Closed tizz98 closed 2 years ago

tizz98 commented 2 years ago

I'm trying to use this library with svelte and rollup but I'm unable to find a working combination of fixes. Here's a demo repository that shows the issue I'm running into: https://github.com/tizz98/svelte-ripple-lib

I'm able to get this to work by including <script src="https://unpkg.com/ripple-lib@1.10.0/build/ripple-latest-min.js"></script> in index.html but this is less than ideal since I can't use typescript to its full effectiveness, nor can I use autocomplete in vscode. I'd also like to use some methods more deeply nested in such as parseTransaction. https://github.com/XRPLF/xrpl.js/blob/418f80bf6daa5e3b7a8c80a1c66a2409507aaca5/src/ledger/parse/transaction.ts#L55

I'm by no means a javascript expert, so it's fully possible there is a simple misconfiguration somewhere but I'm having an awful time figuring out where that is. Any help would be great!

natenichols commented 2 years ago

Hi @tizz98, thanks for opening an issue.

Note that before this issue was opened, I had never used either rollup or svelte, so take my observations with a grain of salt.

So, I think the problem here is with rollup. For some reason, the commonjs plugin does not appear to be converting the commonjs modules from ripple-lib into es6 modules that svelte uses.

I saw a number of similar issues in different StackOverflow and GitHub issues, but none that exactly addressed the issues I was seeing.

I'm assuming this is some issue w/ trying to use the resolve, commonjs, and typescript plugins together with rollup.

I have, however, used webpack before, and we use webpack to package our xrpl-latest.min.js that gets hosted on unpkg.

So, I went ahead and wrote up a version of this that uses svelte and webpack. I'll go ahead and put up a PR based on this public template

The fact that this works in webpack leads me to belive that this is an issue with either rollup, the rollup configuration, or the plugins used by rollup.

Let me know if that works for you, and feel free to ping me with any follow up questions.

Best, Nathan

natenichols commented 2 years ago
Screen Shot 2021-10-07 at 12 47 40 PM

Here is the result I got running in Firefox.

tizz98 commented 2 years ago

Wow, really appreciate the quick response! Webpack was going to be my next thought as well, since that's what this lib uses. I'll give that a try in my project, thank you!

natenichols commented 2 years ago

No problem! I had a blast playing with new frameworks/technology.

natenichols commented 2 years ago

Closing this for now, but please reopen/comment if you have any more questions.

tizz98 commented 2 years ago

I was able to get this working with my project, you are a lifesaver, thank you again!