Gatsby and Client Only Components

Gatsby and Client Only Components

by John Vincent


Posted on October 1, 2019


Any component referencing window cannot be rendered server-side.

Error

The error will be

"window" is not available during server side rendering.

Debugging HTML Builds

Cause

Using

import InfiniteCarousel from 'react-leaf-carousel';

<InfiniteCarousel

which references window for window sizing and re-sizing.

Solution

Dynamically load the component.

import Loadable from 'react-loadable';
// import InfiniteCarousel from 'react-leaf-carousel';
import Loading from './Loading';

const LoadableComponent = Loadable({
    loader: () => import('react-leaf-carousel'),
    loading: Loading,
});

<LoadableComponent

Loading.jsx

import React from 'react';
import PropTypes from 'prop-types';

const Loading = (props) => {
    const { pastDelay } = props;
    return <span>{pastDelay ? <h3>Loading...</h3> : null}</span>;
};

Loading.propTypes = {
    pastDelay: PropTypes.bool.isRequired,
};

export default Loading;