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.


The error will be

"window" is not available during server side rendering.

Debugging HTML Builds



import InfiniteCarousel from 'react-leaf-carousel';


which references window for window sizing and re-sizing.


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,



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;
Gatsby Getting StartedGatsby Webpack Bundle Analyzer