Gatsby - Uncaught TypeError - Problème de contexte / construction

Question

Je développais mon application à Gatsby et je suis resté bloqué. Tout fonctionne correctement avec "gatsby develop", mais lorsque j'exécute "gatsby build", j'obtiens une erreur:

"WebpackError: TypeError: Cannot destructure property 'cursorStyles' of 'Object(...)(...)' as it is undefined."

Et oui, les curseurs de styles sont définis dans le contexte, donc tout devrait fonctionner parfaitement ou il me manque quelque chose. J'ai essayé de nettoyer le cache, mais l'erreur se produit toujours, ce qui est très étrange car je n'ai eu aucun problème pour travailler sur ce projet localement.

EDIT - oui, j'ai enveloppé l'application gatsby avec le fournisseur global comme vous pouvez le voir ci-dessous. Je ne comprends tout simplement pas pourquoi la compilation ne fonctionne pas, alors que j'ai clairement accès au contexte ...; /

gatsby-browser.js

import React from "react"
import { GlobalProvider } from "./src/context/globalContext"

export const wrapRootElement = ({ element }) => {
  return <GlobalProvider>{element}</GlobalProvider>
}

Contexte - les valeurs sont définies dans le fournisseur global const

import React, { createContext, useReducer, useContext } from "react"

//Define Context
const GlobalStateContext = createContext()
const GlobalDispatchContext = createContext()


//Reducer
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}`)
      }
    }
  }



  export const GlobalProvider = ({ children }) => {
    const [state, dispatch] = useReducer(globalReducer, {
      currentTheme: "dark",
      cursorType: false,
      cursorStyles: ["pointer", "hovered", "locked", "white"],
    })

    return (
        <GlobalDispatchContext.Provider value={dispatch}>
          <GlobalStateContext.Provider value={state}>
            {children}
          </GlobalStateContext.Provider>
        </GlobalDispatchContext.Provider>
      )
}

//custom hooks for when we want to use our global state
export const useGlobalStateContext = () => useContext(GlobalStateContext)

export const useGlobalDispatchContext = () => useContext(GlobalDispatchContext)

Layout.js - un problème se produit lors de la déstructuration et de l'utilisation de mon hook personnalisé

import React, {useState} from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import { createGlobalStyle, ThemeProvider } from "styled-components"
import { normalize } from "styled-normalize"

import Header from './header'
import Cursor from './customCursor'
import Navigation from './navigation'

import { useGlobalStateContext, useGlobalDispatchContext } from '../context/globalContext'


const Layout = ({ children }) => {
  const { cursorStyles, currentTheme } = useGlobalStateContext()
  const dispatch = useGlobalDispatchContext()
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  const darkTheme = {
    background: '#000',
    text:'#fff',
    red: '#ea291e'
  }

  const lightTheme = {
    background: '#fff',
    text:'#000',
    red: '#ea291e'
  }

  const onCursor = cursorType => {
    cursorType = (cursorStyles.includes(cursorType) && cursorType || false)
    dispatch({ type: "CURSOR_TYPE", cursorType: cursorType})
  }

  const [toggleMenu, setToggleMenu] = useState(false)

  return(
    <ThemeProvider theme={currentTheme === "dark" ? darkTheme : lightTheme}>
    <GlobalStyle/>
    <Cursor toggleMenu={toggleMenu} />
    <Header onCursor={onCursor} toggleMenu={toggleMenu} setToggleMenu={setToggleMenu} />
    <Navigation onCursor={onCursor} toggleMenu={toggleMenu} setToggleMenu={setToggleMenu} />
    <main>{children}</main>
    {console.log(currentTheme)}
    </ThemeProvider>
  ) 
  
  
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Answer 1

Enfin je l'ai résolu! Je ne sais pas pourquoi, mais je suppose que c'est juste Gatsby qui travaille de manière mystérieuse. J'ai dupliqué mon code depuis gatsby-browser, et mis exactement la même chose dans le fichier gatsby-ssr et ... étonnamment, les erreurs étranges concernant "objet non défini" ont disparu.

Malheureusement, en raison du fait que gatsby build dans ce cas fonctionne de manière similaire au rendu côté serveur de next.js, j'ai dû corriger mon code à différents endroits - par exemple, les propriétés de "window" devaient être rendues conditionnellement - mais en dupliquant gatsby- le code du navigateur vers le gatsby-ssr a corrigé le problème de construction! Donc, comme je le pensais, ce n'était pas un problème avec mon code, mais plutôt un problème avec la configuration de gatsby.