Use Owl Carousel 2 with next.js and react

Question

I want to use jQuery owl carousel with my next js react app. I dont want to use npm package react-owl-carousel only owl-carousel and jquery plugin.

I use lazy load with next.js dynamic and put the following code in my Webpack config:

import dynamic from 'next/dynamic';
const Slider = dynamic(() => import('...'), {
  ssr: false,
});

Webpack config:

config.plugins.push(new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
}));

Slider component:

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

When I use $('element').owlCarousel(...), I got the following error:

TypeError: this.owl.owlCarousel is not a function

Answer 1

In next.config.js:

const webpack = require('webpack');
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.plugins.push(new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }))
return config;
}}

In your component:

import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
const OwlCarousel = dynamic(import("react-owl-carousel"), {ssr: false});