Loading of JS code in head

[hsatl]

Hi guys,
I have a quick question. I know the issue but I am not able to figure out what to do differently to fix it.

I am using an external library and the library code is inserted in the head.

When the page loads first time, the library does not load. When I refresh it or come back to the page after navigating to a different page. It starts working.

So this is a problem of order of loading. How can I either perform a refresh of the page so the library loads (which is a hacky way and probably not preferable)?

Otherwise what should I do to ensure that the library loads.

Can anyone help with this?

[aurelie]

Hi,
to help you better, can i know what library and for what purpose you are loading it?

[hsatl]

@aurelie sorry. I should have added that earlier.
I am using uploadcare. I am embedding the following script ih head.

<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
<script src="https://ucarecdn.com/libs/widget-tab-effects/1.x/uploadcare.tab-effects.lang.en.min.js"></script>
    
<script>
uploadcare.registerTab('preview', uploadcareTabEffects)
UPLOADCARE_PUBLIC_KEY="my_public_key" 
UPLOADCARE_TABS="file facebook gdrive gphotos dropbox instagram" 
UPLOADCARE_EFFECTS="crop, flip, rotate, blur, grayscale, mirror, enhance"
</script>

So, after first time when I log in and go the tab. I get this message:

Once I refresh the page. It all works fine.
I am sure there is some order of loading issue, not weweb per se. But I was hoping you can shed some light to make it work.

[dorilama]

If you want to implement the integration this way you need to set the global variables before you load the library.

My understanding is that the html component will load remote scripts first and then execute inline scripts (at least in the editor), so this implementation is not well suited for use in weweb.
Go deeper in the docs, there are other ways to implement the widget.

I integrated it successfully in a custom component, to have a better developer experience.

[aurelie]

I have take a look, it seems that there is no Vue3 wrapper for this library, but using a custom component to be sure that the different scripts are load is correct order seems the good approach (they have a npm package it seems with a js api)

[hsatl]

@dorilama , @aurelie thank you for your inputs. I am trying to use some inline code and make it work. Your insights are really helpful.