Hi all, I’m trying to include a fullcalendar widget in my javascript app. I’m able to get the main widget to render, but it also requires some plugins to become fully functional. anvil.js.window has access to the FullCalendar package, but not the plugin. I’ve added the plugin cdn to the native libraries section, but can’t seem to get the object readable on the form. Is there something about the syntax I need to consider? In JS it would be:
import interactionPlugin from "@fullcalendar/interaction";
Not sure how to translate this to python or the limitations of the window object. Thanks all
1 Like
That looks like a js module. Have you followed the docs on how to use those?
Yes, it had great documentation on how to get the module working overall, it’s just that when trying to import the plugins for that module I’m not gaining any traction. I keep trying to access the attributes of the FullCalendar module through the anvil.js.window import but nothing seems to work.
I keep getting this error:
ModuleNotFoundError: No module named 'anvil.js.window.FullCalendar'
I pointed you at the anvil docs for using a js module. Have you followed what those say? (it doesn’t look like you have).
To clarify, I have followed the docs and it worked for the main module, but not for the plugin. My question is if there is a different syntax for loading module plugins into python from JS, as I keep getting errors.
I am experiencing a similar thing trying to import packages for Walletconnect integration shown here. Installation | WalletConnect Docs
My steps were:
- Find the cdn link for the packages
- Paste into native libraries
- from anvil.js.window import Package
Some of them appear But some do not. Are some packages not compatible with the JavaScript environment that is built into anvil?
This is the package I am unable to use.
Not sure what the difference is between this and other ones that do work.
Not all Javascript packages are intended to be used in the browser. Not sure about that particular one, but here’s a tip from Stu about working with troubling packages: THREE.js orbit controls - #3
Welcome to the confusing world of JavaScript file types.
It’s difficult to give a one size fits all approach to this. But there is almost always a way. Unless the library you’re using is really not intended for the browser.
jsdelivr can be hit or miss. It really depends on the library author. Often library authors don’t provide browser versions of their code and in this situation there’s no guarantee that the cdn jsdelivr provides will work in the browser.
Tip: if using a cdn from jsdelivr, or another provider, then check the console for any errors when the app loads. If you see errors then the cdn may not be consumable by browsers.
If using a cdn like this then the namespace will appear on window. Often the namespace used is similar to the library name, but not always. If I can’t find what name the module has used on window I might open the cdn url and try to find it in the source code. 
Alternative approach
I’ve used skypack.dev a fair bit for importing JavaScript. The advantage here is that skypack converts the JavaScript to more modern syntax, which doesn’t rely as much on the library author implementing a browser version. We can import the JavaScript module directly using anvil.js.import_from (I’ve edited the post above to reflect this). Unfortunately the skypack project looks like it’s dead. Last I checked their search feature was broken and the team behind it has moved on to new things.
I now use https://esm.sh/ or https://jspm.org/. These offer the same as skypack.dev.
If you have specific libraries you can’t import into python then pasting the approach you’ve used as well as a link to the original library (either GitHub or the package on npmjs) will allow us to take a look and find a way. Bonus for adding the python code you expect to work.
3 Likes
@frederick.dwight
luckily your desired JS Calendar library is well documented and provides instructions for using the cdn version:
Here’s an example of that in action:
And just for good measure - here’s one with jspm.org
Anvil | Login
@joinlook your library isn’t quite so helpful:
https://docs.walletconnect.com/2.0/web3modal/faq#do-you-offer-support-for-installing-the-script-via-a-cdn
Do you offer support for installing the script via a CDN?
No, not at the present time. However, while we are working on one, you can easily compile the library using tools such as Vite or Webpack and expose everything you need on window object.
But the jspm.org approach works well
With the jspm.org versions, checkout the native libraries.
The code there is copy and pasted from jspm’s online generator
here’s the one using FullCalendar
Potential gotcha with using importmap
If using importmap only the first importmap on the page will be processed by the browser.
If you turn an app that uses importmap into a dependency you’ll need to think about how the dependency and the main app might both need to use an importmap.
I think the right approach would be to get the main app to put it in native libraries, so that it can merge the map as it sees fit.
But then developing the dependency might be a pain.
1 Like
Thank you,
I wasnt able to figure out that wagmi approach but I was able to find a way to import walletconnects standalone modal and client signer using the normal anvil.js tool with a cdn url. However, I am facing an error deep in the imported JavaScript which I am not sure how to resolve.
Would you mind looking at this? If needed, I am willing to pay you for your time to help me work through this problem.
Here is my test app:
I am following these instructions: Installation | WalletConnect Docs
when i run SignClient.init([projectId]) I get the following error:
TypeError: isWsUrl is not a function
at new WsConnection (https://cdn.skypack.dev/-/@walletconnect/jsonrpc-ws-connection@v1.0.11-YCkG09Cds1bFpDgBvzvo/dist=es2019,mode=imports/optimized/@walletconnect/jsonrpc-ws-connection.js:24:10)
at Ct.createProvider (https://cdn.skypack.dev/-/@walletconnect/core@v2.7.1-vgC50RusGyuIUnuBpcuz/dist=es2019,mode=imports/optimized/@walletconnect/core.js:1091:41)
at async Ct.init (https://cdn.skypack.dev/-/@walletconnect/core@v2.7.1-vgC50RusGyuIUnuBpcuz/dist=es2019,mode=imports/optimized/@walletconnect/core.js:1011:39)
at async J.initialize (https://cdn.skypack.dev/-/@walletconnect/core@v2.7.1-vgC50RusGyuIUnuBpcuz/dist=es2019,mode=imports/optimized/@walletconnect/core.js:1694:87)
at async J.start (https://cdn.skypack.dev/-/@walletconnect/core@v2.7.1-vgC50RusGyuIUnuBpcuz/dist=es2019,mode=imports/optimized/@walletconnect/core.js:1689:25)
at async $.initialize (https://cdn.skypack.dev/-/@walletconnect/sign-client@v2.7.1-x3fO47To8uWwxCKLk2bi/dist=es2019,mode=imports/optimized/@walletconnect/sign-client.js:651:7)
at async $.init (https://cdn.skypack.dev/-/@walletconnect/sign-client@v2.7.1-x3fO47To8uWwxCKLk2bi/dist=es2019,mode=imports/optimized/@walletconnect/sign-client.js:640:12)
@joinlook Did you ever get this working?
As part of getting ready for ETHDam, I’ve been making sure I can get various js libs working within Anvil and WalletConnect was one of them.
It was painful, but I got there in the end. Here’s a clone link:
You’ll need to add your wallet connect project id in the secrets module.
1 Like
@owen.campbell nothing seems to happen when clicking on the connect button. I ahve configured the project id secret, is there anything else that needs to be done?
@joinlook did you ever manage to get walletconnect to work? Would be very grateful if you can point me in the right direction.