Context is undefined during development reloads

So I use a few contexts like:

const useAppState = () => { return useContext(AppContext)! }

const useAppState = () => { return useContext(AppContext)! }

this worked fine for a while now, since I make sure to always wrap components that use it into the correct providers. For about a week now, when using npm run dev when I make small changes ot my code (just a linebreak for example) and save, my browser running localhost:3000 will have a:

Cannot destructure property 'userDetails' of 'useAppState(...)' as it is undefined.

Cannot destructure property 'userDetails' of 'useAppState(...)' as it is undefined.

I then have to manually reload the page in the browser to see the change. This is a little annoying since I like to see visual layout changes immedieately on my second screen while I adjust the code, now I always have to mouse over to reload the page. What could be causing this? I mean it all runs perfectly well as a whole site, just the little live updates break it?

2 Replies

REEEEE•2y ago

Unfortunately HMR doesn't support context at the moment. I think if your context definitions are in different files than the ones you are modifying then it should be fine. Also, I know it can be annoying to mouse over so you could try to use the reload shortcut and just quickly focus the browser with ALT TAB or CMD TAB if on mac

BersaelorOP•2y ago

mhmm, they are in different files, I have 4 ContextProvider , like

const AppContext = createContext<AppContextType>();

const AppContextProvider: ParentComponent = (props) => {
  // ... data definitions/signals
  return (
    <AppContext.Provider value={{
      ..// values
    }}>
      {props.children}
    </AppContext.Provider>
  )

const useAppState = () => { return useContext(AppContext)! }

export {
  AppContextProvider,
  useAppState
};

const AppContext = createContext<AppContextType>();

const AppContextProvider: ParentComponent = (props) => {
  // ... data definitions/signals
  return (
    <AppContext.Provider value={{
      ..// values
    }}>
      {props.children}
    </AppContext.Provider>
  )

const useAppState = () => { return useContext(AppContext)! }

export {
  AppContextProvider,
  useAppState
};

for example my NavBar imports the AppState and anytime I adjust anything in it, it'll crash for undefined ` in (Cannot destructure 'userId' of useAppState as it is undefined):

const NavBar: Component<Props> = (props) => {
  const { userId } = useAppState();

const NavBar: Component<Props> = (props) => {
  const { userId } = useAppState();

Gaming

Programming

Context is undefined during development reloads