HMR breaks when modifying React context provider

Describe the bug

Vite HMR breaks when modifying React context provider Related: https://github.com/vitejs/vite-plugin-react/issues/24

Reproduction

selrond/vite-react-usecontext

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 413.26 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 89.1.21.76
    Chrome: 90.0.4430.93
    Firefox: 87.0
    Firefox Developer Edition: 89.0
    Safari: 14.0.3
  npmPackages:
    vite: ^2.2.3 => 2.2.4 

Used package manager: npm

Logs

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[pablocdev]

Same issue here, but im trying to be more specific with that.

In my experience:

1. IN THE SAME FILE. Creates a context, and exports a provider

export const Context = createContext();

export const Provider = ({children}) => (
  <Context.Provider value={/* whatever*/}>{children}</Context.Provider>
)

Running npm run dev works. Forcing a hot reload on this file, crashes (context gets default value for all useContext calls).

1. IN SEPARATED FILES

export const Context = createContext();

import { Context } from './my-context-file';

export const Provider = ({children}) => (
  <Context.Provider value={/* whatever*/}>{children}</Context.Provider>
)

Running npm run dev works. Forcing a hot reload on any of those files, still works.

Tell me if you need more info, or a minium reproduction repo.

Hope it helps!

[IanVS]

I’ve pushed up a PR that fixes this issue, according to a test I wrote based off the reproduction in the issue description. But, it requires a change to how Vite handles import.meta.hot.invalidate(), so I think it will need some discussion with the Vite team.