DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
firedev99
firedev99

Posted on

Hey, I'm trying to deploy a site with gatsby but I'm getting an error

so I'm getting an error saying cannot destructure property 'currentTheme' object as it is undefined

//Layout
const {currentTheme, cursorStyles} = useGlobalStateContext()
const dispatch = useGlobalDispatchContext()

//GlobalContext
const globalReducer = (state, action) => {
switch(action.type) {
case "TOGGLE_THEME": {
return {
...state,
currentTheme: action.theme,
}
}
case "CURSOR_TYPE": {
return {
...state,
cursorType: action.cursorType,
}
}
default : {
throw new Error(unhandled action type: ${action.type})
}
}
}

//Provider
export const GlobalProvider = ({children}) => {
const [state, dispatch] = useReducer(globalReducer, {
currentTheme: window.localStorage.getItem("theme") === null ? "dark" : window.localStorage.getItem("theme"),
cursorType: false,
cursorStyles: ["pointer", "hovered", "nav-open"]
})

Top comments (5)

Collapse
 
hectoraldairah profile image
Hector Aguilar

Hello! This is going to be late but... here we go

This is happening because gatsby needs to know what are you doing with useContext in a ssr mode. In your case, you need to have the same gatsby-browser.js code in your gatsby-ssr.js code.

Also, the window object only works in the browser, so you can make this tricky code to avoid the error

export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(globalReducer, {
    currentTheme:
      typeof window !== "undefined"
        ? window.localStorage.getItem("theme") === null
          ? "dark"
          : window.localStorage.getItem("theme")
        : "dark",
    cursorType: false,
    cursorStyles: ["pointer", "hovered"],
  })
Enter fullscreen mode Exit fullscreen mode

That's it! I was facing the same error yesterday by following the Awwwards rebuilt video by Wrong Akram hahaha.

Collapse
 
12dimov profile image
Vania Dimova

The same here, Akram doesn't take it to deployment, maybe there is a link?

Collapse
 
esrgx profile image
ESRGX

Dude... I was stuck with this issue for a few hours.
Thank you for solving it for me!

Collapse
 
cvsudheer108 profile image
Sudheer Kumar

This helped me a lot too. I fixed the issues by copying the gatsby-browser.js to gatsby-ssr.js and also checking for undefined for localstorage. Thanks a lot!!!!

Collapse
 
oginnisamuel profile image
OginniSamuel

pls who will help me with this. I am new to gatsby and I want to use this few lines of codes you used as well. but am still getting error. The solution didn't work for me. How did you manage to run npm run build without getting those error? pls i need help.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›