2

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?

Improve this question

1 Answer 1

Reset to default
3

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).

Improve this answer
8
  • Wait a tic - the network traffic looks strange to me - what type of Community template is this? Aura appears to be getting loaded more than once and I do not see a request for both /resource for jQUERY and bootstrap.min.js which would account for afterScriptsLoaded being invoked. This also seems that the request for JQUERY is happening before Aura and the app is even initialized/available. This looks less and less like LockerService or Aura issue and something specific to the way Communities integrates LC's into a template.
    – Doug Chasman
    May 17, 2016 at 21:47
  • ... also the 304 (redirect) on aura_prod.js is a bit of a concern.
    – Doug Chasman
    May 17, 2016 at 22:28
  • Hi Doug. Thanks for the prompt feedback! We have disabled LS for now as it is blocking our development. We have verified that disabling LS does indeed solve the issues we encountered. I also made a mistake when I tried it on standalone - it turns out that LS was disabled and that's why it worked. For the network traffic I clicked the "name" column and it rearranged the order and so it is not listed according to the loading order. And yes, bootstrap.min.js is not being loaded which is the problem. The Community Template for this is Napili using a custom blank template for the page.
    – unhinged
    May 18, 2016 at 1:20
  • We also tried enabling LS on other standalone apps and it also caused problems from failing to load moment.js (which is required for fullcallendar jquery plugin). Another thing, I also tried loading only /resource/JQUERY which loads correctly according to network traffic, but afterScriptsLoaded still was not invoked (so I thought it was a cache thing).
    – unhinged
    May 18, 2016 at 1:27
  • And no, there were no CORS exceptions in the console. By way this is the error for the standalone app with fullcalendar plugin: Uncaught Error: Unable to create locker IIFE: TypeError: Cannot set property 'moment' of undefined throws at xxx://xxxxxxxx/aura_prod.js:1:27
    – unhinged
    May 18, 2016 at 1:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .