使用 Owl 轮播 2 和 next.js 并做出反应

Question

我想在我的下一个 js React 应用程序中使用 jQuery owl 轮播。我不想只使用 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 is not a function

Answer 1

检查捆绑文件后，我发现 webpack 将另一个 jQuery 实例传递给 owl.carousel 文件

这里是 webpack 包代码

__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

解决了问题

在 webpack 之后将 node_modules/jquery/dist/jquery.js 作为 jquery 实例

Answer 2

通过 jQuery 和 webpack 在 next.js 项目的根目录 next.config.js 文件中注入全局 window

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

使用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>
      );
    }

导入组件并用于您的父组件。请注意，您必须使用 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 }
);

编码愉快。

Answer 3

在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});

使用 Owl 轮播 2 和 next.js 并做出反应

Use Owl Carousel 2 with next.js and react

jquery

reactjs

owl-carousel-2

next.js