How do I get around window not defined during Gatsby build? If check is not working

Question

One of my props uses a conditional operator to determine the color of a nav element. But the statement requires the window.location.pathname which causes this error during build.

WebpackError: ReferenceError: window is not defined

What I was trying to do is pull in the slug from wordpress and if it matched the current page slug it would show the active color.

Here is my code snippet with the check for a window inside of a styled component. It is confirmed that the conditional works as it should in development.

const noBrowser = () => typeof window === "undefined"
color:  ${props=> noBrowser()?'#000':(props.to===window.location.pathname? '#05C079ff':'#F21C5Eff')};

but this does not seem to catch the lack of a browser window and I still get the same error.

Does anyone have a suggestion on how to get around this? The pages are generated from wordpress slugs via graphql. The links are generated as icons.

Answer 1

Have you tried something like this?

color:  ${props => noBrowser ? '#000' : (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff')};

Or directly reversing the condition:

color:  ${props=> typeof window !== "undefined" ? (props.to===window.location.pathname? '#05C079ff':'#F21C5Eff') : '#000':};