Gatsby build production error using Material UI

Hi, I'm getting an error when trying to build production for gatsby, but on develop my website runs with no problem. I'm using Material UI and it's choking on the areas that I'm using the library. Hope anyone has any ideas.

My repo is hosted at: https://github.com/Wayne-CO/Greenstone-Wellness

When running gatsby build I get:

failed Building static HTML for pages - 6.444s

ERROR #95313

Building static HTML failed for path "/404/"

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

15 | }, 16 | activeLink: {

17 | color: ${theme.link.active} !important,
| ^ 18 | }, 19 | linkLogo: { 20 | height: "100%",

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

This is the part of my code that's running into an error during build. It can't be a misuse because on develop it's working.

const useStyles = makeStyles(theme => ({
  appBar: {
    backgroundColor: "transparent",
    position: "relative",
    boxShadow: "none",
    marginBottom: props => props.data.headerMb,
  },
  activeLink: {
    color: `${theme.link.active} !important`,
  }
}))

Comments

[Wayne-CO]

Turns out it was a 404.js page that was using a component that accepts props but I did not provide props for the page.
Not sure why error handling didn't catch that during build.

[Lucis]

${theme.link && theme.link.active} will probably fix it temporarily.

It might be related to the SSR process that Gatsby runs when building for production, take a look into it.

[Wayne-CO]

Yeah it's not just that theme variable. When I comment that out and run gatsby build other undefined variables are showing up. I keep repeating the process many times over and still same thing. Even on simple areas where I'm just passing a prop from parent to child and using it in the child it errors out. Not sure why. I've updated my question to include the repo.