Question

我正在尝试在下一个js应用程序中动态呈现包含react-owl-carousel的自定义react组件。

但是，由于react-owl-carousel的性质，无法将其呈现为服务器。因此，我决定通过将ssr设置为false来跳过动态导入的服务器端渲染，如下所示：

 const Testimonials = dynamic(
  () => import('../components/home/Testimonials'),
  {
    ssr: false,
    loading: () => <p>...loafing</p>
  }
)

完整的Home组件如下所示：

import React from 'react';

const Testimonials = dynamic(
  () => import('../components/home/Testimonials'),
  {
    ssr: false,
    loading: () => <p>...loafing</p>
  }
)

export default class Home extends Component {

    render () {
      return (
       <div>
        <Testimonials />
       </div>
      );

}

见证组件如下所示：

import React from 'react';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

const Testimonials = () => {


  return (
    <div>
      <p>skjdjks djks dk sjdk</p>
      <OwlCarousel
        className="owl-theme"
        loop
        margin={10}
        nav
      >
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
    </OwlCarousel>
    </div>
  );
}

export default Testimonials;

但是，我一直在努力与动态组件一起在客户端上加载大约4个小时。在客户端，它仅显示加载指示器。如果我删除了ssr选项，它将尝试服务器渲染该组件并引发错误。请找到随附的屏幕截图，其中显示了我当前在客户端上看到的内容。

更新：如果我注释掉“见证”组件中与OWL Carousel有关的所有内容，则该组件将显示加载指示器并在客户端呈现。所以我猜测问题出在猫头鹰转盘上。还不确定这是什么。

Answer 1

最终，经过大量调试并尝试了不同的方法，我能够按照以下步骤操作：

1）安装jquery npm install jquery --save

2）更新next.config.js文件，以通过webpack的Provide插件添加jquery，例如所以：

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const webpack = require('webpack');

const withFonts = require('next-fonts');
module.exports = withFonts(withLess(withCSS(
  {
    webpack: function (config) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
            name: '[name].[ext]'
          }
        }
      })

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

      return config
    }
  }
)));

在我的情况下，我还使用了下一个js模块：@zeit/next-css @zeit/next-less，因此我的配置看起来像这样。

无法在Next.js中获取动态组件以跳过服务器端渲染并仅在客户端上显示

1 个答案: