javascript - Webpack: "Cannot read property 'fn' of undefined" when importing owl.carousel

Question

Really struggling to figure this one out on my own. I am trying too install owl.carousel into my vendor.js file. When I run it, I'm not getting any module errors in the command line, but I am getting this message in the console and the carousel element isn't showing when I load the html file:

Uncaught TypeError: Cannot read property 'fn' of undefined
    at owl.carousel.js:1718
    at Object.9 (owl.carousel.js:18)
    at n (bootstrap:18)
    at vendor.4e3b2d82bbbaa5b67230.bundle.js:2
    at vendor.4e3b2d82bbbaa5b67230.bundle.js:2
    at vendor.4e3b2d82bbbaa5b67230.bundle.js:2
(anonymous) @ owl.carousel.js:1718
9 @ owl.carousel.js:18
n @ bootstrap:18
(anonymous) @ vendor.4e3b2d82bbbaa5b67230.bundle.js:2
(anonymous) @ vendor.4e3b2d82bbbaa5b67230.bundle.js:2
(anonymous) @ vendor.4e3b2d82bbbaa5b67230.bundle.js:2

I know it's jQuery related, but as far as I can tell - jQuery is imported before the owl.carousel file and isn't throwing up the same error for any other imported files that need to use it (such as Bootstrap or Magnific-Popup).

Please help me figure this out!

vendor.js

import 'jquery/dist/jquery.min';
import 'jquery-ui';
import 'popper.js/dist/popper';
import 'bootstrap/dist/js/bootstrap';
import 'owl.carousel/dist/owl.carousel';
import 'magnific-popup/dist/jquery.magnific-popup';
import 'aos/dist/aos';

var AOS = require('aos');
AOS.init();

jQuery(document).ready(function($) {
    
    var slider = function() {
        $('.nonloop-block-3').owlCarousel({
        center: false,
        items: 1,
        loop: false,
            stagePadding: 15,
        margin: 20,
        nav: true,
            navText: ['<span class="icon-arrow_back">', '<span class="icon-arrow_forward">'],
        responsive:{
        600:{
            margin: 20,
          items: 2
        },
        1000:{
            margin: 20,
          items: 3
        },
        1200:{
            margin: 20,
          items: 3
        }
        }
        });
    };
    slider();
    
    var siteMenuClone = function() {

        $('<div class="site-mobile-menu"></div>').prependTo('.site-wrap');

        $('<div class="site-mobile-menu-header"></div>').prependTo('.site-mobile-menu');
        $('<div class="site-mobile-menu-close "></div>').prependTo('.site-mobile-menu-header');
        $('<div class="site-mobile-menu-logo"></div>').prependTo('.site-mobile-menu-header');

        $('<div class="site-mobile-menu-body"></div>').appendTo('.site-mobile-menu');

        

        $('.js-logo-clone').clone().appendTo('.site-mobile-menu-logo');

        $('<span class="ion-ios-close js-menu-toggle"></div>').prependTo('.site-mobile-menu-close');
        

        $('.js-clone-nav').each(function() {
            var $this = $(this);
            $this.clone().attr('class', 'site-nav-wrap').appendTo('.site-mobile-menu-body');
        });


        setTimeout(function() {
            
            var counter = 0;
      $('.site-mobile-menu .has-children').each(function(){
        var $this = $(this);
        
        $this.prepend('<span class="arrow-collapse collapsed">');

        $this.find('.arrow-collapse').attr({
          'data-toggle' : 'collapse',
          'data-target' : '#collapseItem' + counter,
        });

        $this.find('> ul').attr({
          'class' : 'collapse',
          'id' : 'collapseItem' + counter,
        });

        counter++;

      });

    }, 1000);

        $('body').on('click', '.arrow-collapse', function(e) {
      var $this = $(this);
      if ( $this.closest('li').find('.collapse').hasClass('show') ) {
        $this.removeClass('active');
      } else {
        $this.addClass('active');
      }
      e.preventDefault();  
      
    });

        $(window).resize(function() {
            var $this = $(this),
                w = $this.width();

            if ( w > 768 ) {
                if ( $('body').hasClass('offcanvas-menu') ) {
                    $('body').removeClass('offcanvas-menu');
                }
            }
        })

        $('body').on('click', '.js-menu-toggle', function(e) {
            var $this = $(this);
            e.preventDefault();

            if ( $('body').hasClass('offcanvas-menu') ) {
                $('body').removeClass('offcanvas-menu');
                $this.removeClass('active');
            } else {
                $('body').addClass('offcanvas-menu');
                $this.addClass('active');
            }
        }) 

        // click outisde offcanvas
        $(document).mouseup(function(e) {
        var container = $(".site-mobile-menu");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
          if ( $('body').hasClass('offcanvas-menu') ) {
                    $('body').removeClass('offcanvas-menu');
                }
        }
        });
    }; 
    siteMenuClone();
    
    var sitePlusMinus = function() {
        $('.js-btn-minus').on('click', function(e){
            e.preventDefault();
            if ( $(this).closest('.input-group').find('.form-control').val() != 0  ) {
                $(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) - 1);
            } else {
                $(this).closest('.input-group').find('.form-control').val(parseInt(0));
            }
        });
        $('.js-btn-plus').on('click', function(e){
            e.preventDefault();
            $(this).closest('.input-group').find('.form-control').val(parseInt($(this).closest('.input-group').find('.form-control').val()) + 1);
        });
    };
    sitePlusMinus();
    
    var siteSliderRange = function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    };
    siteSliderRange();
    
    var siteMagnificPopup = function() {
        $('.image-popup').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
         gallery: {
          enabled: true,
          navigateByImgClick: true,
          preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
          verticalFit: true
        },
        zoom: {
          enabled: true,
          duration: 300 // don't foget to change the duration also in CSS
        }
      });

      $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false
      });
    };
    siteMagnificPopup();
    
});

标签： javascriptjquerywebpackowl-carousel