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