Server side rendering window is not defined problem. about react-owl-carousel

[cpiocova]

Hello, I hope to help you. It worked like this for me:

import the two css files into _app.js

It would look like this:

import App from "next/app";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<Component {...pageProps} />
)}};

export default MyApp;

In next.config.js add

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const webpack = require("webpack");
module.exports = withPlugins([withImages], {
webpack: (config) => {
config.node = {
fs: "empty",
};
config.module.rules.push({
test: /\.(glb|gltf|bin)$/,
use: {
loader: "file-loader",
},
});
config.plugins.push(
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}));
return config;
},
});
PD: The important thing here is to configure webpack with jquery

In the file where they use the OwlCarousel. In my case in Testimonials.js

import React from "react";
import dynamic from "next/dynamic";
const OwlCarousel = dynamic(import("react-owl-carousel"), {
ssr: false,
});
function Testimonials() {
return (
<OwlCarousel className="owl-theme" loop margin={10} nav>
...
</OwlCarousel>
)}
`

[ibrhmvci]

@nayyir-haulerads thank you ! I'm using nextjs and I imported owlcarousel like this ;
import dynamic from 'next/dynamic';
const OwlCarousel = dynamic(import('react-owl-carousel'));
then in my main component;
state= { display:false};
componentDidMount(){ this.setState({display:true}) }
and finally returned like that ;
<div className="container slider-container">
{this.state.display ? <MyOwl/> : <div></div>}
</div>
first components mounts and sets state to true .then next/dynamic loads owl-carousel library and it works.

[cscottsa]

Hi @rh0delta , I tried everything possible. It has to do with style-loader webpack uses and the library. The library exposes the "window" object which the server-side does not have, so when it tries to preload the page on the server the app crashes, because the object does not exist.

I found a alternative, which does Exactly the same thing and works perfectly, except a very small bug, which isn't really a bug. (last link)

react-slick:
https://github.com/akiran/react-slick

If you decide to use custom arrow components, just create your component as below:
akiran/react-slick#671

[rh0delta]

Were you able to determine the cause of this issue because I am now receiving the same error.

[nayyir-haulerads]

I was able to get around the web pack errors with using the cdns for owl carousel, and using componentDidMount to initialize carousel object.

[valeriashpiner]

Unfortunately, I have the same issue with my server-side rendering.
I will use alternative slider, but I would be happy if this issue will be fixed, because I like owl-carousel.

[nayyir-haulerads]

Hi @valeriashpiner, if you just include the original cdns for owl carousel 2 and initialize the carousel for your objects using ReactDOM to find the element within componentDidMount it will work

[ibrhmvci]

Isn't there any solution yet ? @nayyir-haulerads can you be more specific and give some details please ? @valeriashpiner what "alternative slider" you used ?

[nayyir-haulerads]

@ibrhmvci the solution that I have found, and continue to use, is to load the owl carousel library from its cdn, rather than using the node package. After loading the cdn you will have access to the owlCarousel function globally. Whichever component you decide to use to render the carousel be sure to add a “ref” attribute to carousel component and call owlCarousel on the element within componentDidMount().

[nayyir-haulerads]

Hope that helps

[NextTrick]

Hi @nayyir-haulerads, can you show your solution in code?

[sharath-tenet]

Can anyone tell me the solution ?
TIA

[Eronmmer]

Can anyone share their solution? I'd really appreciate