CODEWITHSUNDEEP
reactjsnext.jsstyled-componentsreact-context
Ton Almeida
Ton Almeida

Reputation: 483

TypeError: Cannot destructure property 'theme' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is null

I'm working on a Next.js application with TypeScript and I have this error:

"TypeError: Cannot destructure property 'theme' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is null."

This is my _app.tsx file:

import { useContext } from "react"
import { ThemeProvider } from "styled-components"

import ContextProvider from "../context/Context"
import { Context } from "../context/Context"

import GlobalStyle from "../styles/global"

export default function App({ Component, pageProps }) {
  const { theme } = useContext(Context)

  return (
    <ContextProvider>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <Component {...pageProps} />
      </ThemeProvider>
    </ContextProvider>
  )
}

This is my Context.tsx file:

import { createContext, useState } from "react"

import Light from "../styles/themes/Light"
import Dark from "../styles/themes/Dark"

interface Props {
  theme: any;
  setTheme: any;
  handleTheme(): void;
}

export const Context = createContext<Props>(null)

export default function ContextProvider({ children }) {
  const [theme, setTheme] = useState(Dark)

  function handleTheme() {
    setTheme(theme.title === "Dark" ? Light : Dark)
  }

  return(
    <Context.Provider 
    value={{
      theme,
      setTheme,
      handleTheme
    }}
    >
      {children}
    </Context.Provider>
  )
}

I've been getting this error and I'm not sure how to solve it.

Can someone help me?

Upvotes: 1

Views: 13409

Answers (3)

Jeremy Thompson
Jeremy Thompson

Reputation: 65692

I was getting a similar error, with map not theme:

TypeError: Cannot destructure property 'map' of '(0 , react_

I had this code and clicking a popup caused the error:

  <Map
    initialViewState={INITIAL_VIEW_STATE}
    style={{ width: '100%', height: '100%' }}
    mapStyle={mapStyle}
    mapboxAccessToken={accessToken}
    onMouseMove={handleMouseMove}>
    <DeckGLOverlay ref={deckRef} />
    <NavigationControl position="top-left" />
  </Map>
  {selected && (
      <Popup
        longitude={selected.LongitudeDeg}
        latitude={selected.LatitudeDeg}
        closeButton={true}
        closeOnClick={false}
        onClose={() => setSelected(null)}
        anchor="bottom"
      >
        <div>
          <p>Operation Number: {selected.OperationNumber}</p>
          <p>Altitude: {selected.AltitudeFtAMSL} ft AMSL</p>
          <p>Speed: {selected.Speed} knots</p>
        </div>
      </Popup>
    )}

Wrapping the Popup in the Map solved it:

  <Map
    initialViewState={INITIAL_VIEW_STATE}
    style={{ width: '100%', height: '100%' }}
    mapStyle={mapStyle}
    mapboxAccessToken={accessToken}
    onMouseMove={handleMouseMove}>
    <DeckGLOverlay ref={deckRef} />
    <NavigationControl position="top-left" />

  {selected && (
      <Popup
        longitude={selected.LongitudeDeg}
        latitude={selected.LatitudeDeg}
        closeButton={true}
        closeOnClick={false}
        onClose={() => setSelected(null)}
        anchor="bottom"
      >
        <div>
          <p>Operation Number: {selected.OperationNumber}</p>
          <p>Altitude: {selected.AltitudeFtAMSL} ft AMSL</p>
          <p>Speed: {selected.Speed} knots</p>
        </div>
      </Popup>
    )}
  </Map>

Upvotes: 0

Henoc Musau
Henoc Musau

Reputation: 1

In Nextjs 13 you need to put the "use client" directive in the top of your component.

Upvotes: 0

RandomPerson
RandomPerson

Reputation: 790

The line where you use 'createContext' in your ContextProvider component needs to have an initial object based on your interface 'Props' and not null.

Upvotes: 2

Related Questions