0

Using lightning components, we want to load a script in our community from a third party. I put that script in a static resource, and now I need to be able to use it.
Script:
window.myScript = function myFunction(){.....

First I tried loading it from the header in the community builder page.
<script src="/resource/[cache-buster-string]/MyResource/path/to/file.min.js"></script>
The problem is, I need to call that script from my component, and I have no way to tell if the script is finished loading (hint: it's not).

I tried using ltng:require inside my component, but for some reason afterScriptsLoaded="{!c.scriptsLoaded}" function is being called too soon, the script hasn't finished loading yet, (I get an error from Aura that such-and-such function that is part of the script is not defined).

So, how do I either:

  • A. find out in my component when the script is done loading from the header and then call the function or
  • B. find out when the script has really actually all finished loading in the component.

Component markup:

<ltng:require scripts="{!$Resource.MyResource + '/theScript.min.js'}" afterScriptsLoaded="{!c.scriptsLoaded}"/>

<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

Component controller:

doInit : function(component, event, helper) {
    console.log("Component loaded");
},

scriptsLoaded: function(component, event, helper){
    myScript();
}

Aura error:

This page has an error. You might just need to refresh it. Action failed: c:mycomponent$controller$scriptsLoaded [eventEncodingUtils is not defined] Failing descriptor: {c:mycomponent}

Where eventEncodingUtils is a function deep inside the third party minimized script.

  • Never faced such problem with ltng:require - function is being called too soon. you can get better support if you share a minimal version of code to replicate the behaviour. – Raul Mar 28 at 11:33
  • I have never had problems with ltng:require. Are you trying to call functions of script from init instead of afterscriptloaded function? – RedDevil Mar 28 at 12:49
  • I'm trying to do whatever it takes to get the script to run. In one case I'm trying from init, but that's when I'm loading the script in the header. In another case I'm trying from afterscriptload function. – AvailableName Mar 28 at 12:52
0

I found a workaround.
I don't know why it wasn't running when being called from ltng:require, but there's a workaround.
I opened the minified js file and did the following:

Original:

function doTheThing(){
...
//Lotsa code written by not me
...
}

My hack:

var thirdPartyScript = function doTheThing(){
...
//Lotsa code written by not me
...
}
thirdPartyScript();

And then loaded the script from the static resource in the header.
Essentially, I'm running it as soon as it loads, and none of my components need to get involved.
Not a great solution, especially if I ever want to get it to stop, but good enough for now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.