Uncaught TypeError: Cannot read property 'fn' of undefined

[puertokhalid]

I'm getting this error when I'm using the owl carousel plugin in my laravel 9 project.

Uncaught TypeError: Cannot read properties of undefined (reading 'fn') at owl.carousel.js:1718:4 at owl.carousel.js:1755:1

this is how I installed it
npm install --save owl.carousel
then in app.js I added

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

then

npm run build
nom run dev

this is my app.js file

import 'owl.carousel';
import * as bootstrap from 'bootstrap';

import '../sass/app.scss';


import jQuery from 'jquery';


window.$ = jQuery;
window.bootstrap = bootstrap;


$(document).ready(function() {
// codes
});

this is my vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app-rtl.scss',
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            '$': 'jQuery',
        },
    },
});

How can I solve this issue ?? I did search on the web nothings works for me thanks

[Billy]

Did you solve this at all?

[puertokhalid]

Did you solve this at all?

Yes I did.
this is how

1) install @rollup

npm install @rollup/plugin-inject --save-dev

2) go to vite.config.js and add

import inject from '@rollup/plugin-inject';

3) then in the plugin section add

plugins: [
...
inject({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
],