Owlcarousel2: Cannot read property 'fn' of undefined

[mortezasabihi]

hi i created a vue cli 3 project and i'm trying to import owl carousel 2, but it fails.

this is my main.js:

import Vue from 'vue';
import App from './App';

import "bootstrap/dist/css/bootstrap.css";
import "./assets/css/bootstrap-rtl.css";

import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";

import "./assets/css/linearicons.css";
import "./assets/css/flaticon.css";
import "./assets/css/main.css";

global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;

import "bootstrap";
import "owl.carousel";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

and i get this error:

Uncaught TypeError: Cannot read property 'fn' of undefined
    at eval (owl.carousel.js?555f:1718)
    at eval (owl.carousel.js?555f:1755)
    at Object../node_modules/owl.carousel/dist/owl.carousel.js (app.js:1250)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at Module.eval (main.js?56d7:1)
    at eval (main.js:42)
    at Module../src/main.js (app.js:2291)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)

[mortezasabihi]

by writing this code:

let owl_carousel = require('owl.carousel');
window.fn = owl_carousel;

it fiexd :)

[matticusfinch]

Where did you add this code? I tried adding below the import in my webpack and it didn't work. I placed it above line 1718 in the owl.carousel.js and it didn't work either.

[dvlpr91]

@mortezasabihi what sound?

[anjaneyulugulla]

it's working

[mitul-srashtasoft]

Not working

[keval2605]

dont import jquery as (import $ from 'jquery'), instead in webpack.config file :
const webpack = require("webpack");
.....
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
]

this works perfectly alright.