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

Question

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

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

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

完整的主页组件如下所示：

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 选项，它会尝试服务器渲染组件并抛出错误。请在附件中找到显示我目前在客户端看到的内容的屏幕截图。

更新：如果我注释掉 'Testimonials' 组件中与 OWL 轮播有关的所有内容，该组件将显示加载指示器并在客户端呈现。所以我猜测问题出在 Owl 旋转木马上。还不确定它是什么。

Answer 1

最终，经过多次调试和尝试不同的方法后，我能够按照以下步骤使其正常工作：

1) 安装 jquery npm install jquery --save

2) 通过 webpack 的提供插件更新 next.config.js 文件以包含 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 中获取动态组件以跳过服务器端呈现并仅在客户端上显示

Unable to get dynamic component in Next.js to skip server side rendering and show only on the client

javascript

reactjs

next.js