Используйте Owl Carousel 2 с next.js и реагируйте

Я хочу использовать карусель совы jQuery с моим следующим приложением js react. Я не хочу использовать пакет npm react-owl-carousel только owl-carousel и jquery плагин.

Я использую отложенную загрузку с next.js dynamic и помещаю следующий код в свою конфигурацию Webpack:

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

Конфигурация Webpack:

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

Компонент слайдера:

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

Когда я использую $('element').owlCarousel(...), я получаю следующую ошибку:

TypeError: this.owl.owlCarousel не является функцией


reactjs next.js jquery owl-carousel-2
person mohsen saremi    schedule 18.06.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

после проверки файла пакета я обнаружил, что веб-пакет передает другой экземпляр jQuery в файл owl.carousel

вот код пакета веб-пакета

__webpack_require__(/*! jquery */ "../../node_modules/owl.carousel/node_modules/jquery/dist/jquery.js")

как вы можете видеть переход jQuery к плагину от node_modules/owl.carousel/node_modules/jquery/dist/jquery.js вместо node_modules/jquery/dist/jquery.js

я исправил проблему, удалив node_modules/owl.carousel/node_modules

после этого веб-пакета передайте node_modules/jquery/dist/jquery.js как экземпляр jquery

person mohsen saremi    schedule 23.06.2019
comment
Большое спасибо за вариант ssr:false next.js. Это привело меня к документации next.js, и да, я использую react-owl-carousel и теперь отлично работает. Застрял более 72 часов - person STREET MONEY; 08.02.2021

arrow_upward
0
arrow_downward

  1. Внедрить глобальное окно через jQuery и webpack внутри файла next.config.js в корень вашего проекта next.js

         module.exports = {
        webpack: (config, {
            buildId,
            dev,
            isServer,
            defaultLoaders,
            webpack
        }) => {
            // Note: we provide webpack above so you should not `require` it
            // Perform customizations to webpack config
            config.plugins.push(
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery"
                })
            );
            // Important: return the modified config
            return config;
        }

  2. Компонент слайдера, использующий компонент react-owl-carousel

        import OwlCarousel from "react-owl-carousel";

    export default function MySlider({ sliders }) {
      return (
        <section>
            <OwlCarousel
              loop={true}
              items={1}
              responsiveRefreshRate={0}
              autoplay={true}
              autoplayTimeout={7000}
              autoplayHoverPause={true}
              nav={true}
              navText={[
                "<i class='icon-arrow-prev'></i>",
                "<i class='icon-arrow-next'></i>"
              ]}
              dots={false}
              margin={20}
            >
              <div class="item"></div>
              <div class="item"></div>
            </OwlCarousel>
        </section>
      );
    }

  3. Импортируйте компонент и используйте его в родительском компоненте. Обратите внимание, что вы ДОЛЖНЫ использовать параметр ssr:false. Документация Next.js рекомендует это

    const MySlider = dynamic(
  () => import("./Myslider"),
  // No need for SSR, when the module includes a library that only works in the
  // browser.
  { ssr: false }
);

Удачного кодирования.

person STREET MONEY    schedule 08.02.2021

arrow_upward
0
arrow_downward

В 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;
}}

В вашем компоненте:

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});
person Isisco    schedule 19.07.2021