Gatsby - Ungefangener TypeError - Kontext- / Build-Problem

Question

Ich habe meine Anwendung in Gatsby entwickelt und bin festgefahren. Mit "gatsby Develop" funktioniert alles einwandfrei, aber wenn ich "gatsby build" ausführe, wird eine Fehlermeldung angezeigt:

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

Und ja, cursorStyles werden im Kontext definiert, also sollte alles perfekt funktionieren oder mir fehlt etwas. Es wurde versucht, den Cache zu bereinigen, aber dennoch tritt der Fehler auf, was sehr seltsam ist, da es keine Probleme gab, lokal an diesem Projekt zu arbeiten.

BEARBEITEN - Ja, ich habe die Gatsby-Anwendung mit dem globalen Anbieter verpackt, wie Sie unten sehen können. Ich verstehe einfach nicht, warum der Build nicht funktioniert, wenn ich eindeutig Zugriff auf den Kontext habe ...; /

gatsby-browser.js

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

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

Kontext - Werte werden in der globalen Provider-Konstante definiert

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 - Problem tritt auf, wenn mein benutzerdefinierter Hook zerstört und verwendet wird

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

Endlich habe ich es gelöst! Ich weiß nicht warum, aber ich denke, es ist nur Gatsby, der auf mysteriöse Weise arbeitet. Ich habe meinen Code aus dem Gatsby-Browser dupliziert und genau das Gleiche in die Gatsby-SSR-Datei eingefügt und ... überraschenderweise sind die seltsamen Fehler über "Objekt undefiniert" verschwunden.

Aufgrund der Tatsache, dass der Gatsby-Build in diesem Fall ähnlich wie das serverseitige Rendering von next.js funktioniert, musste ich meinen Code leider an verschiedenen Stellen korrigieren - z. B. mussten "Fenster" -Eigenschaften bedingt gerendert werden -, aber Gatsby wurde dupliziert. Der Browser-Code für die gatsby-ssr hat das Bauproblem behoben! Wie ich dachte, war es kein Problem mit meinem Code, sondern ein Problem mit der Konfiguration von gatsby.