Используйте Owl Carousel 2 с next.js и реагируйте - PullRequest
Новая
       22

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

0 голосов
/ 18 июня 2019

Я хочу использовать jQuery owl carousel с моим следующим приложением js реагировать. Я не хочу использовать пакет 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 не является функцией

1 Ответ

0 голосов
/ 23 июня 2019

после проверки файла комплекта я обнаружил, что веб-пакет передает другой экземпляр 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

...