'Why: TypeError: Cannot read property 'useContext' of null

I have no clue why I got this, I added some Redux Thunk, some useAppSelector in slice, and edited ./store.ts.

It does not show any line number.

TypeError: Cannot read property 'useContext' of null
> Build error occurred
TypeError: Cannot read property 'useContext' of null
    at exports.useContext (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react/cjs/react.production.min.js:24:118)
    at useReduxContext (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react-redux/lib/hooks/useReduxContext.js:27:46)
    at useSelector (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react-redux/lib/hooks/useSelector.js:53:9)

I use useConext also. Is this issue Redux related or useContext related?

I did not touch this part of the code, but only here useContext is used:

import { createContext, useCallback, useContext, useState } from 'react'
import { v4 as uuidv4 } from 'uuid'

const AppContext = createContext(undefined)

export const AppProvider = ({ children }) => {
    const [openedModals, setOpenedModals] = useState([])
    const tempUserId = uuidv4()

    const isModalOpened = useCallback(
        (modalName: string) => openedModals.includes(modalName),
        [openedModals]
    )

    const setModalOpened = useCallback(
        (modalName: string) => (isOpened: boolean) => {
            if (isOpened) {
                !openedModals.includes(modalName) &&
                    setOpenedModals((prev) => [...prev, modalName])
            } else {
                setOpenedModals((prev) => prev.filter((modal) => modal !== modalName))
            }
        },
        [openedModals]
    )

    return (
        <AppContext.Provider value={{ isModalOpened, setModalOpened, tempUserId }}>
            {children}
        </AppContext.Provider>
    )
}

export const AppConsumer = AppContext.Consumer

export const useAppContext = () => {
    const context = useContext(AppContext)
    return context
}

export default AppContext

I have some new selectos in slice.ts

export const authnResS = (state: RootState) => state.tikexAPI.authnRes
export const authnRes = useAppSelector(authnResS)
export const userDTOS = createSelector(
    [authnResS],
    (authnRes?: AuthnRes) => authnRes?.data
)
export const userDTO = () => useAppSelector(userDTOS)
export const organizationsS = createSelector(
    (userDTO?: UserDTO) => userDTO?.organizations
)
export const organizations = () => useAppSelector(organizationsS)


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source