How to implement a jQuery lib in lightning components?

Question

I've been struggling to set my awesome jQuery carousel into a lightning component but it doesn't seem to work. Instead i'm having an error from the lightning component debug tool :

myComponent.cmp :

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

 <ltng:require 
styles="/resource/recruiting/slick/slick.css,/resource/recruiting/slick/slick-theme.css"    
              scripts="/resource/recruiting/jquery/jquery.js,/resource/recruiting/slick/slick.min.js"
    afterScriptsLoaded="{!c.doInit}"/>

 <div class="carousel">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>

</aura:component>

myComponentController.js

({
  doInit: function (cmp, evt) {

   $('.carousel').slick();

  }
})

Error from Lighning PLatform

Uncaught Action failed: ns:myComponent$controller$doInit ['get' on proxy: property 'jQuery2140363857389167290932' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '3' but got 'undefined')]

I don't figure out why i'm actually getting this error as i've followed miticulously the documention requirements.

Thank you very much for your help to make my awesome carousel work!

Answer 1

In general, Lightning LockerService makes it difficult for sophisticated JS libraries to modify the DOM directly. The Lightning team does work hard to ensure specific libraries are compatible but they can't guarantee all of them. So I'd lean towards starting with a Lightning-first solution.

There is a standard lightning:carousel component if you want something off-the-shelf: https://developer.salesforce.com/docs/component-library/bundle/lightning:carousel/specification

If you need more customizability, Appiphony has a free open source Lightning Strike component. If the configuration options available don't fully meet your use case, you can modify the code/CSS/etc directly: http://www.lightningstrike.io/#!/strikeCarousel