Context wrapper breaking HMR

[joakimbo]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

Describe the bug

Hi, being new to Vite, React and Typescript this might be a "me issue" but I have stumbled onto something when wanting to use a simple wrapper for contexts (generalising use<context> functions). But simply defining this wrapper causes a throw to be made of not using the context inside of its provider.

A similar but long ago closed issue is vitejs/vite#3301 but it might be a red herring since I'm not totally sure where the origin of the my issue lies.

Reproduction

https://github.com/joakimbo/vite_react_hmr

Steps to reproduce

1. npm install
2. npm run dev
3. modify count-provider.tsx, save and you should see Uncaught Error: countContext has to be used within <CountContext.Provider> in the console

System Info

Edit: not sure why it wasn't included but I have been using Firefox 137.0.2 (64-bit)

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 42.69 GB / 63.10 GB
  Binaries:
    Node: 22.14.0 - ~\AppData\Local\fnm_multishells\125216_1745080843483\node.EXE
    npm: 10.9.2 - ~\AppData\Local\fnm_multishells\125216_1745080843483\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @vitejs/plugin-react-swc: ^3.8.0 => 3.9.0
    vite: ^6.3.1 => 6.3.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ArnaudBarre]

This is because you're making two files which import each other and this tend to brake HMR.

I've been coding in React for years and never needed such a util. I'm usually keep the error short so that my wrapper is 3 lines:

export const useCountContext = () => {
  const countContext = useContext(CountContext);
  if (!countContext) throw new Error("ContextProvider not available");
  return countContext;
}

If you have developpers that don't understand this short error, you probably want them to read the React docs first and probably you want to avoid having generic function that don't solve any business purpose.

Plus for all context that are singleton, I use zustand each has many advantages over contexts (one of them being less verbose)

If you still want to create a util, you can enforce the use of displayName (I even made an eslint rule for that) (which debuggability in React devtools for example) and then you have something like this:

export const useContextWrapper = <T extends unknown>(
  ReactContext: React.Context<T>,
) => {
  const context = useContext(ReactContext);
  if (!ReactContext.displayName) console.warn("A context is missing a displayName")
  if (!context) throw new Error(`${ReactContext.displayName} provider not available`);
  return context;
}

That you can use like this:

export const CountContext = createContext<CountContext | null>(null);
CountContext.displayName = "CountContext"

export const useCountContext = () => useContextWrapper(CountContext);

[joakimbo]

This is because you're making two files which import each other and this tend to brake HMR.

I figured this would end up being a me problem 😄 but thank you @ArnaudBarre for the quick and elaborate response.