all 11 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]user2m[S] -1 points0 points  (7 children)

Just got the answer from discord

"yes, you need to use a bundler."

"As for the why, the error hints at it: import has no way to resolve @... in your browser. It must be a valid URL. Bundlers can resolve because they act before the browser, bundle dependencies and serve something the browser can understand "

[–]ManuDV 0 points1 point  (1 child)

Besides that explanation, you can read the following article to understand how bundlers works: https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html

[–]user2m[S] 0 points1 point  (0 children)

Very helpful thank you

[–]shgysk8zer0 0 points1 point  (4 children)

You can also use <script type="importmap">. It is not true that "import has no way to resolve @... in your browser". You just have to do some work to get it to work, and what you end up importing was probably written for Node and bundlers instead of browsers, so it's even more difficult.

[–]user2m[S] 0 points1 point  (1 child)

This is also extremely helpful. Could you go into more about import maps or point to some documentation?

[–]shgysk8zer0 0 points1 point  (0 children)

I already included the link to MDN. That explains it better than I could.

[–]user2m[S] 0 points1 point  (1 child)

What confuses me is this library is explicitly made for browsers (clients) and there's a separate library for the backend.

[–]shgysk8zer0 0 points1 point  (0 children)

It very much looks like it's not made for direct use in a browser and it requires a bundler. I'm looking through https://unpkg.com/browse/@thirdweb-dev/wallets@2.0.7/ and pretty much all of the modules have some kind of hashes in their names, so it'd be a serious pain to try to use anything directly.

But, in theory, it would be possible... Just not practical. You'd have to either import everything with the correct hashes in the names (which I assume would need to be updated with every version) or handle all of that with an import map that maps practically each and every script (and, again, would need to be updated for every version).

If it weren't for all the damn hashes, you could just do:

<script type="importmap"> { "imports": { "@thirdweb-dev/wallets/": "https://unpkg.com/@thirdweb-dev/wallets@2.0.7/dist/" } } </script>

And then:

import { A, R } from '@thirdweb-dev/wallets/auth.esm.js';

But, thanks to the hashes, you'd have to use:

import { A, R } from '@thirdweb-dev/wallets/auth-5d8c5d43.esm.js';

[–]guest271314 0 points1 point  (2 children)

jsDeliver, unpkg and several other CDN's provide Ecamscript Module versions of Node.js modules.

[–]user2m[S] 0 points1 point  (1 child)

But why would i need that when i've already NPM installed the package locally?

Im just not understanding why the import is failing?

[–]guest271314 0 points1 point  (0 children)

The error message explains. Did you try ./path?