Changes in files injected with useContext() force vite-react project for full reload

[Relaxe111]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• [ +] Read the docs.
• [ +] 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.
• [+ ] This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

When I change something in a .ts file it force to full reload the application, with losing the state of the application. This is NOT related to mobx-state-tree, this happens even if i add a simple const test = 'test' field in any part of the .ts file. I tried to migrate a big project to vite and it take long time to reload for each change in any .ts file, also after a while it hangs and wait for server to respond and it never updates. I think this is related to this issue.

repo with the issue example: https://github.com/Relaxe111/vite-react-mst

• vite version: 2.1.2
• Operating System: ubuntu 18.04
• Node version: 14
• Package manager (npm/yarn/ppm) and version: yarn 1.22.10

[Relaxe111]

I found out that issue is some how related to useContext(). When i import store directly, it works properly. But when i inject it with react context it does a full reload.

[Relaxe111]

I've seen similar opened issues not sure if they are related or not:

3301

2308

[iamhmx]

@Relaxe111 Is there a solution to this problem?

[iamhmx]

@patak-dev Is there a solution to this problem?

[adnanalbeda]

I had the same issue. I was able to somehow solve it.

When HMR is called, I find this error in the console with the following message:

You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot()

After some search, here is the issue on SO. I copied the implementation from the answer and paste it in my project, so my main.tsx looks like this now:

let container: HTMLElement | null = null;

document.addEventListener("DOMContentLoaded", function () {
  if (!container) {
    container = document.getElementById("root");
    if (!container) {
      console.log("No root element is found.");
    } else {
      const root = createRoot(container);
      root.render(
        <StrictMode>
          <StoreContextProvider>
            <CustomRouter history={history}>
              <App />
            </CustomRouter>
          </StoreContextProvider>
        </StrictMode>
      );
    }
  }
});

After I made this change, I can say that my app loading is way faster than the default implementation. Also. HMR doesn't break now, but the context will lose it's data, unless you store them in localstorage.

[liho00]

React context is a great feature, however few issues related to react context from 2020, 2021 did not get resolved, i dont think vite is a good develeopment tools for react project, unless you dont using react context...

[sapphi-red]

Closing as I confirmed this works after upgrading plugin-react-refresh to plugin-react.

related: #3301