Owl-carousel - TypeError: Cannot read property 'fn' of undefined

Question

I tried to use owl.carousel package in my react app. I installed jquery and owl.carousel package with npm.

npm install jquery owl.carousel

In App.js

import React from 'react';
import $ from 'jquery';
import 'owl.carousel';


componentDidMount() {
$('.team-slides').owlCarousel({
// my options
});
}

I got error message

TypeError: Cannot read property 'fn' of undefined.
/owl.carousel/dist/owl.carousel.js:1718

  1715 |  * @todo Navigation plugin `next` and `prev`
  1716 |  * @public
  1717 |  */
> 1718 | $.fn.owlCarousel = function(option) {
       | ^  1719 |  var args = Array.prototype.slice.call(arguments, 1);
  1720 | 
  1721 |    return this.each(function() {

Please help me solve this issue.

score 9 · Accepted Answer · answered Apr 06 '20 at 06:55

9

You have to include these in your index.html

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

answered Apr 06 '20 at 06:55

Gimnath

824
9
11

6

but what if you already have installed jquery? why are you referencing from the CDN? – Mr_LinDowsMac Jul 18 '20 at 06:40
it looks like what you need is actually the slim version not the regular one to get owl carousel to work. – fagiani Mar 28 '23 at 23:09
jquery had to be loaded first before loading the owl libraries. – leodotcloud Mar 30 '23 at 06:41

score 5 · Answer 2 · edited Feb 20 '21 at 12:04

5

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

This one is enough try this script I hope your carousel will work properly..

edited Feb 20 '21 at 12:04

Bhargav Rao

50,140
28
121
140

answered Feb 20 '21 at 10:24

Anisha Yadav

51
1
1

Owl-carousel - TypeError: Cannot read property 'fn' of undefined

2 Answers2