Cannot use import statement outside a module
If it 's an ESM module , then you can do something similar to https://docs.nordcraft.com with await import('https://cdn/esm-module.js') . If it 's not an ESM module , but just a standard script , then depending on the script you import in head , you should be able to find it somewhere on the global scope . globalThis.script_name.function_name() Can you tell me what script you 're trying to use ? Hey @Jacob Kofoed This is the script https://cdn.jsdelivr.net/npm/appwrite@13.0.1 https://appwrite.io/docs/references/cloud/client-web/account There are some different ways to do this : 1 ) Use ESM modules , cdn .jsdelivr .net supports this by adding /+esm to the url . So your custom action could look something like : async function TriggerAppwrite(args, ctx) {
const { Client, Account } = await import('https://cdn.jsdelivr.net/npm/appwrite@13.0.1/+esm');
console.log(Client, Account);
}2 ) Add a script to your head like in the attached screenshot . Then in your custom actions , you can access Appwrite with : async function TriggerAppwrite(args, ctx) {
const { Client, Account } = globalThis.Appwrite;
console.log(Client, Account);
}Keep in mind that adding scripts to the head will make them load while blocking rendering . So the first option is usually the better option . However , some scripts requires to be loaded before the page is rendered . 🔥1@Jacob Kofoed have a similar error , i did get it working with the 1st of the 2 methods mentioned above however , in that case any other actions that require the imported JS have no knowledge of the import outside of the action in which the import happens . Is there a way to make the import global other than through the header ? For others who are looking for this . I required a JS package I needed to import to be globally accessible , which means I can have several custom functions refer to it without having to import it within every custom function . The script tag in the header is the way forward but the package did not attach itself to the global scope via the esm link alone . What I ended up implementing is : <script type=“module”>import * as packageName from 'https://cdn.jsdelivr.net/npm/packageName/Version/+esm'; window.packageName = packageName;</script> You can attach the package to the global scope yourself with window.packageName = packageName; Then in any custom action function you can use any of the modules or functions by calling : globaThis.packageName.SomeModuleFuncion(); Hope this is helpful to anyone . I 'm sorry , I tried but couldn 't manage it . I want to integrate some charts with Observable . How can I use the starter example : < !DOCTYPE html > <div id = "myplot " > < /div > <script type = "module " > import * as Plot from " https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm " ; const plot = Plot .rectY ( {length : 10000 } , Plot .binX ( {y : "count " } , {x : Math .random } ) ) .plot ( ) ; const div = document .querySelector ( " #myplot " ) ; div .append (plot ) ; < /script > Hi @rggm I have set up a bare minimum example of how you could use something like Observerble plot in toddle here https://editor.nordcraft.com/projects/red_tarfful_prickly_gamefowl/branches/start/actions/plot?leftpanel=design&rightpanel=style&canvas-width=800&canvas-height=800 I use an action to dynamically load the library . Then in a component use the action and assign the plot onto a div using its ID . Please take a look at the example to understand how it works . If you have the time , I suggest you abstract the third party into a package so others can easily use it as well 👍 👍1
.jpeg/public)