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.

Answer 1

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>