[SalesForce] ltng:require not loading scripts in Community pages when LockerService is enabled

Since enabling LockerService our components cannot load external static resource scripts anymore. To test, I created a component:

<aura:component implements="forceCommunity:availableForAllPageTypes" 
access="global" >

   <ltng:require scripts="/resource/JQUERY,/resource/bootstrap/js/bootstrap.min.js"
              afterScriptsLoaded="{! c.scriptsLoaded}"/>

</aura:component>

…and also the corresponding sciptsLoaded controller function:

scriptsLoaded: function(component) {
    console.log("scripts loaded");
}

When opening the page the console does not output the expected "scripts loaded" text. I also checked the scripts loaded by the page and verfified that "bootstrap.min.js" was not loaded:
Scripts loaded by page

jQuery was loaded but it might be because it was cached because the afterScriptsLoaded function was not invoked.

I also tried using the same component on a normal lightning app and it works fine (the problem is only in community pages). EDIT: Turns out LS was disabled for this app. We tried turning on LS on other standalone apps and encountered the same problem (for moment.js / fullcalendar plugin).

I understand there are some known issues on Locker Service but when can we expect a fix for this? Or in the meantime, is there a workaround?

Best Answer

Sorry - I just looked closer at your post - I see that jquery is being loaded so this is not what I thought it was. Looks like your org does not have LS enabled at all (either for Communities or .app's) - I see in the org's audit trail that you deactivated both critical updates. Can you add detailed repro instructions for both the community failure case and the successful standalone .app scenario to your support case asap so I can see this action?

Your are using jQuery v1.12.0 and Bootstrap v3.3.6 (latest) and we are still working through the long list of libraries/frameworks to verify which ones are LockerService compliant (CSP policy forbids use of unsafe-eval and unsafe-inline, and code must comply with ES5 "use strict", cannot manipulate DOM elements that you or the library did not directly create). You indicated that standalone things worked - did you test with Enable Lightning LockerService Security activated for the standalone case?

BTW from cache or not does not matter to ltng:require.

NOTE: Leaving this for posterity but I do not think its the root cause anymore

You should be seeing some CORS (Cross Origin Resource Sharing) exceptions in the js console if the problem is what I think it is. Please confirm that you are seeing these exceptions.

The same issue happens with cross namespace /resource references such as when you have a base managed package that a number of other managed packages depends on. Pre Locker Service external script includes were not subject to the stricter CORS standard but now they are.

The good news is that the cross domain issue with $Resource (/resource) has already been fixed in Summer'16 R0 that is scheduled to deploy to production Friday (5/20).

Related Topic