Hi I am trying to use an import statement here in the JS… I am getting an error as you can see saying that I cannot use “import” outside of a module. Any thoughts here on the error and why is this happening?
Jon
Hey, this is not a right approach to import scripts in WeWeb. If you’re trying to embed a script, you might want to check this tool out from @raydeck.
https://weweb-embed.statechange.ai/
import is to be used in some more specific setting, that is a little out of no-code scope. When trying to import scripts for now you gotta use the CDN/embed/whatever else they’re called code snippets and the statechange approach.
With an NPM plugin and some other JS code embed updates coming soon, this kind of stuff might be possible, but for now, only the above mentioned approaches.
1 Like
@Broberto As always huge help. I actually personally know Ray Deck from the Xano stuff so yeah I’ll reach out to him and watch this!
1 Like
Glad to have helped a little. Embedding scripts with the statechange tool is very simple, just follow the steps, and you’re all good 
1 Like
@Broberto Im just hoping that I dont have to upgrade to the “agency” plan to use the “import” feature… Lol I saw another thread that mentioned adding the “custom development” scenario…
@raydeck Howdy Ray! I use to chat with you i nteh xano slack but im not sure where it went off to. Anyways, I watched the video you made above for statechange.ai.
I have to try and do this for an “import” JS module as mentioned in nango front end SDK here - Frontend - Nango Docs
I tried adding script tags to the import JS mentioend and I still get module errors i nteh console when reloading the page (for the initiate part)… Any thoughts on the funcitonality with code that requires Import" libraries?
thanks! Jon
@Joyce Any thoughts? It seems liek a very simple application is to have some sort of scenario where basic “import” based libraries can run in JS…
If the tool in question has only an sdk you can import then a custom component indeed might be a solution.
I found this CDN instead. Might be worth looking at using ray’s method.
@Broberto Thanks a bunch. @raydeck metnioned that in my previous mention to him as well. I treid all of the variations ESM, default, static etc. and though it “seemed” like this was importing on a page/app load for a few of them (ESM produced console errors to disallow imports), It was supposed to in theory, allow me to just reference “nango” in other JS workflows. I continue to get “nango not defined” errors using this as my JS code:
const nango = new Nango({ publicKey: ‘your-public-key’ });
nango.auth(‘google-calendar’, ‘test-connection-id’)
.then((result) => {
// Handle success, if needed
})
.catch((err) => {
// Handle error, if needed
});
I am using this as the custom JS on page load:
if(!window[“scp-loading-c2239001-d831-46ae-9b45-0a9c84815dbc”]) {
window[“scp-loading-c2239001-d831-46ae-9b45-0a9c84815dbc”] = true;
let doc;
/* Adding script from https://cdn.jsdelivr.net/npm/@nangohq/frontend@0.33.2/dist/index.min.js */
doc = document.createElement(‘script’);
doc.src = ‘https://cdn.jsdelivr.net/npm/@nangohq/frontend@0.33.2/dist/index.min.js’;
document.body.appendChild(doc);
}
I do NOT get console errors on page load about “import” so I guess I am to believe it is working in the intended manner, yet I still get errors in other JS workflows when trying to run that JS…
The library that you want to use is in ESM format, so you need to import it, but to execute inline script the html element of weweb uses eval which doesn’t allow import declarations.
There are many other approaches that you can use, for example:
- add a script of type module in the head of the page. It works only in the published app and not in the editor
- use js actions to dynamically add a script of type module in the page. It works also in the editor.
- bundle the library in iife format that will add it to the global window, then and add it as a script in the way you are doing now
- create a custom component that imports the library
If you want to use nango outside the module script that loads it you need to save it somewere accessible like the window object.
@dorilama @Broberto @Joyce Hey thanks a bunch mariano! I will try item 1 and 2 if I cannot get item 3 to work.
So, is there a way to tell if Nango is loading in the iife format to the global window upon testing? Its apparently not loading to the entire app because I cannot reference nango in other JS actions all around the app (hence, the reference error)… If I can solve whats going on here, Im golden!
As, a refresher, here is the script Im running JS from “page load” (the elements that I want to run JS from in actions are only on that page)… The script:
if(!window[“scp-loading-c2239001-d831-46ae-9b45-0a9c84815dbc”]) {
window[“scp-loading-c2239001-d831-46ae-9b45-0a9c84815dbc”] = true;
let doc;
/* Adding script from https://cdn.jsdelivr.net/npm/@nangohq/frontend@0.33.2/dist/index.min.js */
doc = document.createElement(‘script’);
doc.src = ‘https://cdn.jsdelivr.net/npm/@nangohq/frontend@0.33.2/dist/index.min.js’;
document.body.appendChild(doc);
}
We may release something very cool to make it straightforward in the next release… tomorrow 
3 Likes
as I said, this specific library is provided only as ESM, and is not adding any instance to the global context, so of course is not accessible after it’s loaded.
1 Like
Ok sorry I didn’t see only esm format is available for your package so it may not works with our new import feature 
We are working on a beta version of a plugin to import package from unpkg but nango is not available on this CDN as it doesn’t provide a umd file I guess
1 Like
@dorilama - Tried option #1, still returned the same error (nango not defined)
Trying option 2 you mentioned ( * use js actions to dynamically add a script of type module in the page. It works also in the editor.) now…
@dorilama @Alexis @Broberto Tried all of the methods youve mentioned. Havent found any of them to work thusfar so either there is something incorrect in the implementation or it just doesnt work.
Lets focus on 1 part of it first… What exact script should either be in the trigger on page load or app load to load it globally? Also, how can i determine in weweb that the script is actually loading globally to debug this?
In addition to what Ive mentioned I have already tried, I have so far tried this from page load and app load in a workflow:
Im not sure why this wont be used globally…
Anyone have anything here??? It should be VERY simple in most no code builders to do this.
Ok, Update here @Broberto @dorilama :
I was able to get this script to popup with the Auth flow directly in the workflow… In essenece, import the JS for nango at runtime and also initiate the auth…
(async () => {
try {
const { default: Nango } = await import(‘https://cdn.jsdelivr.net/npm/@nangohq/frontend@0.33.2/+esm’);
// Now you can use Nango
const nango = new Nango({ publicKey: ‘09a9ca99-5cba-4978-b3e4-006bb3f321d3’ });
nango.auth('google-calendar', 'test-connection-id')
.then((result) => {
// Handle success
console.log(result);
})
.catch((err) => {
// Handle error
console.error(err);
});
} catch (error) {
// Handle import error
console.error(‘Error importing Nango:’, error);
}
})();
That being said, its sending the results of the oauth conenction to the console… How do I dynamically print the results from this to a variable within weweb?
2 Likes