useContext return undefined

[philldev]

Describe the bug

Here is the example code

type CtxType = {
  foo : string
}

const Ctx = createContext<CtxType>()

const useAppCtx = () => {
  const ctx = useContext(Ctx)
  if (!ctx) throw 'context is undefined'
  return ctx
}

const Provider: ParentComponent = (props) => {
  return <Ctx.Provider value={{foo: 'bar'}}>
    {props.children}
  </Ctx.Provider>
}

const App = () => {
  return <Provider>
    <Child />
  </Provider>
}

const Child = () => {
  const {foo} = useAppCtx()
  ....
}

Whenever I use useAppContext it will return undefined when I save the code, however it works fine when I refresh the browser

The issue is when i have to style the component I have to refresh the browser manually.

Is there any workaround for this issue? Thank you

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-wqdscb?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. copy the code above
2. try to edit code The code will be stuck in runtime error because of the undefined context and you have to manually refresh the browser to continue

Expected behavior

I don't have to refresh the browser manually to continue working on my code.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome

Additional context

No response

[ryansolid]

So I understand this is an HMR bug right.. It works on refresh and works when navigating around, just not on code save?

If so this might be a known issue with around context in HMR: https://github.com/solidjs/solid-refresh/issues/15

[philldev]

So I understand this is an HMR bug right.. It works on refresh and works when navigating around, just not on code save?

If so this might be a known issue with around context in HMR: solidjs/solid-refresh#15

oh yeah I have the similar issue.

[philldev]

I have found the workaround from https://github.com/solidjs/solid-refresh/issues/15

/* @refresh reload */

putting this comment on top of the file that have the Context code seems to be working for me. the undefined error did not appear and the code is updating correctly in browser

[xTye]

I found a better work around from https://github.com/vitejs/vite/issues/3301#issuecomment-1080030773. Seems like a Vite issue and /* @refresh reload */ didn't work for me.

[lxsmnsyc]

@xTye Yes, the superior workaround is to move createContext on a separate module alongside utilities to access that context instance.

Right now, those are the two known fixes, but the upcoming rewrite for Solid Refresh should fix the Context issue

[mathieuprog]

I have the same problem where useContext(OrganizationContext) will return undefined on HMR. solid-js: 1.7.12 solid-refresh: 0.5.2 However, it seems that this issue was marked as solved by PR #34

[philldev]

@xTye Yes, the superior workaround is to move createContext on a separate module alongside utilities to access that context instance.

Right now, those are the two known fixes, but the upcoming rewrite for Solid Refresh should fix the Context issue