External Libraries in Code Studio (again)

Ive just discovered today (although to be fair I havent compiled the components in around 2 weeks) that the following no longer works. in the main.html

<script setup>
    const Fuse = cs.loadExternalComponent(() => window.Fuse);
</script>

It throws an immediate code studio compiler error - but gives me no detail at all …..

Anyone with thoughts ?

Weirdly if I comment it out the whole block, all my code still works as expected - which is significantly concerning to me considering I am stil using said library !!!

Its the script declaration - because if I comment out just the cs.load line there is no change.

If it helps, the underlying error is: “Tags with side effect ( and ) are ignored in client component templates”

I think that’s Vue disallowing the script tag, but I’m not sure beyond that what the fix would be.

This must have changed in a recent patch then - it was fine a couple of weeks ago !!!

My question now becomes if this is now in some way disallowed - how are you supposed to load external libraries ?

Im confused because my logic still works even with the whole block commented out ….

Maybe the preload configuration is enough ?

I realise its not necessarily a Netcall problem to resolve but I’m assuming this could blow up a lot of peoples functionality …..

Ive been asked to submit it as a ticket so ill be doing that shortly for investigation.

Vue have changed the way they deal with <style> and <script> tags (those with “side effects” as they refer to them). Previously they were just stripped out and ignored, so it was never doing anything in your code anyway. But now Vue will throw a compile error instead.

So if you were to remove that <script> tag entirely, your component should behave as it would have originally.

The cs.loadExternalComponent function is used to load a Vue component, the function specifically attempts to poll for a piece of code to be available, i.e. waiting for an external library to load and then it will initialise that into Vue, I am not sure what window.Fuse is, but unless it was a Vue component, then not sure it would of worked.

This is now resolved and seemingly still all working as expected.