Unable to load jQuery in Salesforce Lightning Application after Summer '16 Release

Question

I have a couple of applications built in Salesforce's Lightning Components.

Recently Salesforce released their Summer '16 Major Release this past weekend, on June 4th 2016. Something weird happened and now I'm getting a weird error every time I try to load any of my applications.

NOTE: I can load other JS libraries, such as svg4everybody just fine, jQuery is the only one I've tried that fails, and my applications heavily depend on it.

Error

Uncaught TypeError: Cannot read property 'expando' of undefined
throws at /resource/jquery:5:8159

That's when I have the following code in a new Lightning Application that I created to see what is up with this jQuery load error. Here's the code I have in the new app:

<aura:application>
  <ltng:require scripts="{!$Resource.jquery}" afterScriptsLoaded="{!c.init}"/>
  <div>
    <button aura:id="buttonThingy" onclick="{!c.clickMe}">Click Me!</button>
  </div>
</aura:application>

In the init function I've got this:

init: function(component, event, helper) {
    console.log('running init');
},

Simple yes?

If I check Chrome's Console Log with the Log XMLHttpRequests checked in console settings, I can see that the request to load jQuery was a success since it says so...

app.js:713
XHR finished loading: GET "https://myOrgDomainName.lightning.force.com/resource/jquery".

Did anyone have this problem yet? If so how did you resolve it?

I've tried uploading minified, unminified, zipped up versions of jQuery to the Static Resources in my Org, and still no luck. Also switched between it being a Private and Public static resource. Still no luck.

Answer 1

What version of jQuery are you using? The thing that changed in Summer'16 is the introduction of LockerService (lots of traffic in this forum during prerelease, webinars, release notes, etc). I've seen this issue and believe it had been corrected but some older versions of jQuery may still have issues with LS compatability.

The latest versions (1.12.4 and 2.2.4) of jQuery should be compatible with Locker Service - please let us known ASAP if updating to the latest branch you are using corrects the issue.

Answer 2

After summer 16 release, we need to change the code to include the external JQuery/Css files from static resource. Here is an example of the same:

<ltng:require .... scripts="{!$Resource.JQuery}" />

Here JQuery is the static resource name, and this static resource is having only single JS File.

For a zip file having multiple files/folder follow another syntax:

<ltng:require ....  scripts="{!join(',', 
    $Resource.jsLibraries + '/jsLibOne.js', 
    $Resource.jsLibraries + '/jsLibTwo.js')}" />

More details you can find in following salesforce doc: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm

Answer 3

jquery 2.2.4 will work, but still you have do some tweaks to your code, the way you access DOM.

See how Locker Service works: https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html

If you need you code be running up then go to setup > critical updates and deactivate locker services.

Answer 4

It's worked with 2.2.4 but it's did not worked with 1.12.4

Answer 5

@Doug Can we expect this issue to be resolved by winter'17 release, as the LockerService will be auto-enabled for all orgs when Winter ‘17 is out. Replacing the existing Jquery with 2.* Jquery version impacts our current implementation, we can do away with this for time being by simply not enabling LockerService but once the Winter'17 is out this option won't be there.