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

Question

I am trying to dynamically render a custom react component containing react-owl-carousel in a next js application.

However, due to the nature of the react-owl-carousel it cannot be server rendered. So i decided to skip server side rendering for the dynamic import by setting ssr to false like so:

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

The complete Home component looks like this:

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

}

The Testimonial component looks like so:

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;

However, i have been battling with the dynamic component to load on the client side for about 4 hours now. On the client side it shows only the loading indicator. if i remove the ssr option it tries to server render the component and throws an error. Please find attached a screenshot showing what i am currently seeing on the client side.

UPDATE: if i comment out everything in the 'Testimonials' component that has to do with OWL Carousel, the component shows the loading indicator and is rendered in the client side. So i am guesing the issue is with Owl carousel. not sure what it is tho yet.

Answer 1

Eventually, after much debugging and trying different things i was able to get it to work by following these steps:

1) Install jquery npm install jquery --save

2) Update the next.config.js file to include jquery via the webpack's provide plugin like so:

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

In my case i am also using these next js module: @zeit/next-css @zeit/next-less , hence my configuration looks like so.