"window" is not available during server side rendering

[yudyananda]

Hi there, i'm using latest version react-slideshow in my gatsby js powerd website. everything is working fine on develop mode but it throws me an error on build process. "window" is not available during server side rendering

this is my component

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'
import { Fade } from 'react-slideshow-image'




const fadeProperties = {
    duration: 5000,
    transitionDuration: 1000,
    infinite: true,
    indicators: false,
    onChange: (oldIndex, newIndex) => {
        console.log(`fade transition from ${oldIndex} to ${newIndex}`);
    }
}

const Slider = () => {
    const data = useStaticQuery(graphql `
        query {
            allFile(
                sort: { fields: name, order: DESC }
                filter: { relativeDirectory: { eq: "slider" } }
            ) {
                edges {
                    node {
                        id
                        name
                        childImageSharp {
                            fluid(maxWidth: 1200, maxHeight: 585, quality: 100) {
                                ...GatsbyImageSharpFluid_withWebp
                                ...GatsbyImageSharpFluidLimitPresentationSize

                            }
                        }
                    }
                }
            }
        }
    `)

    return(

        <div className="slide-container front-slider pointer-events-none">
            <Fade {...fadeProperties}>
                {data.allFile.edges.map(image => (
                    <div className="each-fade">
                        <div className="image-container select-none">
                            <Img className="rounded" alt="first bro" key={image.node.name} backgroundColor fluid={image.node.childImageSharp.fluid} />
                        </div>
                    </div>
                ))}
            </Fade>
        </div>
    )
}

export default Slider

I wonder how to make it works on build?

[femioladeji]

Hi @yudyananda can you check this out https://www.gatsbyjs.org/docs/debugging-html-builds/#fixing-third-party-modules and this. The package uses window to check when you resize the browser but window is a browser object and it's not available on the server. Let me know if you're able to fix it with the instruction in the links

[yudyananda]

Hi @femioladeji many thanks for quick answer

try with creating util

util.js

export const isBrowser = () => typeof window !== 'undefined'

somepage.js

import React from 'react'

import Container from '../container'

import { isBrowser } from '../window'

import FrontSlider from '../slider/frontSlider'

const FrontHero = () => {


    return (
        <Container helper="container px-5 pt-0 pb-10 mx-auto">
            <div className="relative">
               
                {isBrowser() && <FrontSlider />}
               
                <div className="overlay block absolute w-full h-auto left-0 bottom-0"></div>
               
                <div className="absolute bottom-0 left-0 z-10 w-full">
                    ...
                </div>
            </div>
        </Container>
    )
}

export default FrontHero

the result is not as i expected, the slider goes inside another div, in this case <div className="overlay block ...

another approach is using loadable-component, works fine, but it caused delay on initial page loading (other element below will overlap slider position before it fully load)

[femioladeji]

@yudyananda it's weird that it's going into the <div className="overlay block ... so what happens if you comment that div?

[yudyananda]

1. use ternary {isBrowser() && <FrontSlider />}
2. modify the webpack config test: /react-slideshow-image/
3. comment the <div className="overlay block ...
4. build gatsby

the result is slider goes inside next element below => <div className="absolute .... Another weird parts <div className="absolute ... is duplicated, one with the slider inside it and the other one is the original content

sorry for bothering you, i'll get back to you with example repo

[femioladeji]

@yudyananda it's fine. Let me know when you have an example repo. I'm always here to help

[mluce194]

I had the same issue on my gatsby Website and I solved this using loadable-components. However it is not as good as expected since, as @yudyananda mentioned, it causes delay on page load. I am not sure what the best solution is.

[femioladeji]

@mluce194 yes you're correct. The window event is used to handle browser resizing. I'm considering using resize-observer-polyfill but I don't know if it will completely solve the SSR issue. I'll continue to make research and hopefully, I'll come up with a solution that works perfectly.

[yudyananda]

Hi @femioladeji, sorry for the late reply. You can check the repo here

not sure whats going on here but

• somehow gatsby doesnt include react-slideshow component on build output
• the react slideshow cause delay on initial page load
• about the duplicate, i guess it has connection with relative and absolute position (from the parent and chilldren)

I really hope you can change on how react-slideshow work to make it more suitable (ssr ready) for other framework like gatsby

[femioladeji]

@yudyananda thanks for reproducing the issue. I've taken a look at it and I've fixed the issue with this PR #81 . I've released a new version (v2.0.1). You don't need any workaround to use it anymore. I've fixed it all in the package so you can remove the isBrowser check and remove the content in gatsy-node file also. There's a little tweak though. Now you have to import the css in your js file so the slider.js file will now look like this

import React from 'react'

import { useStaticQuery, graphql } from 'gatsby'

import Img from 'gatsby-image'

import { Fade } from 'react-slideshow-image'
import 'react-slideshow-image/dist/styles.css'


const fadeProperties = {
    duration: 5000,
    transitionDuration: 1000,
    infinite: true,
    indicators: false,
    onChange: (oldIndex, newIndex) => {
        console.log(`fade transition from ${oldIndex} to ${newIndex}`);
    }
}

const Slider = () => {
    
    const data = useStaticQuery(graphql `
        query {
            allFile(
                sort: { fields: name, order: DESC }
                filter: { relativeDirectory: { eq: "slider" } }
            ) {
                edges {
                    node {
                        id
                        name
                        childImageSharp {
                            fluid(maxWidth: 1200, maxHeight: 585, quality: 100) {
                                ...GatsbyImageSharpFluid_withWebp
                                ...GatsbyImageSharpFluidLimitPresentationSize

                            }
                        }
                    }
                }
            }
        }        
    `)
    
    return (
        <div className="slide-container front-slider pointer-events-none">
            <Fade {...fadeProperties}>
                {data.allFile.edges.map(image => (
                    <div className="each-fade">
                        <div className="image-container select-none">
                            <Img className="rounded" alt="first bro" key={image.node.name} backgroundColor fluid={image.node.childImageSharp.fluid} />
                        </div>
                    </div>
                ))}
            </Fade>
        </div>
    )
}

export default Slider

As regards the positioning, I think it has to do with the div wrapping the just an overlay text.

Let me know if this works for you