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;
Gatsby
React
- Basic React
- Basic React Patterns
- Basic React Redux
- Basic React Redux App
- Basic React Testing with Jest and Enzyme
- Building and deploying MyTunes to johnvincent.io
- Building and deploying React Github Helper App to johnvincent.io
- Deploy React App to Heroku using Travis Continuous Integration
- Deploy TaskMuncher React App to AWS
- First time deploy TaskMuncher React App to Digital Ocean
- Gatsby and Client Only Components
- Gatsby Getting Started
- Gatsby React Icons
- Mac Visual Studio Code
- Material-UI
- Material-UI Pickers
- Material-UI Styling
- Optimizing TaskMuncher with Webpack 4
- Overview of React Gomoku
- Overview of React Hangman
- Overview of React Lights Out
- Overview of React Yahtzee
- React Material-UI
- React Production Issues
- React PropTypes
- React/Redux Node/Express Ecosystem
- Redux Dev Tools
- Responsive Material-UI
- Styling Material-UI components using Styled-Components
- TaskMuncher Performance
- Transforming Html with Webpack
- Update TaskMuncher for Lighthouse Findings
- Update TaskMuncher to be a Progressive Web App
- Update TaskMuncher to use React BrowserRouter
- Update TaskMuncher to Webpack v4, Babel v7, Material-UI v3
- Upgrading Babel and ESLint to use React Advanced Language Features
- Webpack Bundle Analyzer