Cannot read theme properties of styled-components during gatsby build

Question

I am trying to build a site in Gatsby styled with styled-components.

Running gatsby develop shows the page fine but when I try the build the page, I get the following error:

Error

Building static HTML failed for path "/Page/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  16 |     font-family: Lack;
  17 |     text-align: center;
> 18 |     background: ${(props) => props.theme.colors.purple};
     |                                                 ^
  19 |     color: ${(props) => props.theme.colors.white};
  20 |   }
  21 | `;


  WebpackError: TypeError: Cannot read property 'purple' of undefined

Layout.jsx

import React from 'react';
import { ThemeProvider, createGlobalStyle } from 'styled-components';
import theme from '../theme/theme';

const GlobalStyle = createGlobalStyle`
  * {
    @import url('Lack-Regular.otf');
  }
  body {
    margin: 0px;
  }
`;

const Layout = ({ children }) => (
  <>
    <GlobalStyle theme={theme} />
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  </>
);

export default Layout;

Toast.jsx

/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import { ToastContainer, Bounce } from 'react-toastify';
import styled from 'styled-components';
import 'react-toastify/dist/ReactToastify.css';

const WrappedToastContainer = ({ className, ...rest }) => (
  <div className={className}>
    <ToastContainer {...rest} />
  </div>
);

const StyledContainer = styled(WrappedToastContainer).attrs({
})`
  .Toastify__toast {
    font-family: Lack;
    text-align: center;
    background: ${(props) => props.theme.colors.purple}; // theme props undefined here.
    color: ${(props) => props.theme.colors.white};
  }
`;

const Toast = () => (
  <StyledContainer
    closeButton={false}
    position="bottom-center"
    autoClose={3000}
    hideProgressBar
    newestOnTop={false}
    closeOnClick={false}
    rtl={false}
    pauseOnFocusLoss={false}
    draggable={false}
    pauseOnHover={false}
    transition={Bounce}
  />
);

export default Toast;

gatsby info --clipboard

  System:
    OS: macOS 11.3.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.1.0 - ~/.nvm/versions/node/v16.1.0/bin/node
    npm: 7.11.2 - ~/.nvm/versions/node/v16.1.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 88.0.1
    Safari: 14.1
  npmPackages:
    gatsby: ^3.4.1 => 3.4.2
    gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0
    gatsby-plugin-styled-components: ^4.4.0 => 4.4.0
  npmGlobalPackages:
    gatsby-cli: 3.4.1

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'AddisonWebsite',
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-styled-components',
      options: {
        // Add any options here
      },
    },
  ],
};

package.json

{
  "name": "addison-website",
  "version": "1.0.0",
  "private": true,
  "description": "AddisonWebsite",
  "author": "Addison",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.4",
    "babel-plugin-styled-components": "^1.12.0",
    "gatsby": "^3.4.1",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-styled-components": "^4.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-feather": "^2.0.9",
    "react-helmet": "^6.1.0",
    "react-toastify": "^7.0.4",
    "styled-components": "^5.3.0"
  },
  "devDependencies": {
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

This error is fairly new to me since I have been using Gatsby + styled-components for awhile now and my builds usually work fine with the above set up. I even have a site that I build recently with near identical files as above.

I understand this might have something do with the SSR but I'm not sure what is wrong with the above.

How can I build my site with gatsby build with the theme provider passing the props properly?

Answer 1

You probably supplied the theme by using the wrapRootElement API in gatsby-browser.js. During build time, Gatsby will instead execute the code from gatsby-ssr.js. This is also explained in the Gatsby docs.

In most cases it should be sufficient to simply copy all code from gatsby-browser.js to gatsby-ssr.js or move common code to another file and import it in both API files.