HMR does not update the content when using react and there's a circular import

[danieltroger]

Describe the bug

Hi, multiple members of the team I'm working in are suffering from Vite's HMR sometimes not working at all (not even full page reloads happen, the page just isn't updated). In some files in the codebase, it consistently never works.

We're using vite together with react. It's driving us crazy when it doesn't work, since we've gotten used to HMR always working, so when things don't behave as expected in the browser, we first think our code is at fault. We re-think approaches and add debug information, only to notice even that doesn't work. Then we reload the page, which unfortunately given our project size takes around 35 seconds (so it isn't a viable workaround to always reload). After a reload, our code suddenly works, and we get frustrated.

This led me to providing this reproduction, in hopes of someone knowing how to fix it. As copying files into a fresh repo didn't reproduce the bug, I have started out with the file where HMR never worked for us (useAnimationStyling) and spent hours painstakingly deleting files from our project.

Unfortunately, the "hit rate" of the bug has gone down from 100% to ~15% in the process, yet the "minimal" reproduction contains 45 files. Most of them just contain one import and one export though.

Apparently, the bug has at least something to do with project size, as deleting a bunch of unused files (not imported at all from vite's entrypoint) from our actual repo seems to have decreased the success rate down to matching the one of the attached reproduction repo.

Please have some patience when trying to follow the reproduction steps.

Related issue: #16284 but I don't think this is the same since for us it works for some files all the time and never for some others.

Reproduction

https://github.com/danieltroger/vite-hmr-bug-repro

Steps to reproduce

1. git clone https://github.com/danieltroger/vite-hmr-bug-repro
2. cd vite-hmr-bug-repro
3. yarn
4. yarn dev
5. Open the provided link in your browser
6. Open devtools in the browser
7. Open ./src/lite/views/Collection/DragAndDrop/useAnimationStyling.tsx in your editor
8. Change the string being logged
9. If the new string is logged, change it again
10. Repeat step 9 until the new string is no longer logged, but only

16:58:48.693 client:64 [vite] invalidate /src/lite/views/Collection/DragAndDrop/useZone.tsx: Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
16:58:48.694 client:223 [vite] hot updated: /src/lite/views/Collection/DragAndDrop/useZone.tsx
16:58:48.695 client:223 [vite] hot updated: /src/lite/views/Collection/DragAndDrop/DragAndDropZones.tsx

Congratulations, you have hit the bug! When our project is in its full glory without any files deleted, this happens every time. You might have to do ~20 saves to hit it.

Here's a video of me walking through the reproduction steps (if it doesn't play, right click + save as and open it with QuickTime):

Screen.Recording.2024-09-27.at.16.56.46.mp4

System Info

System:
    OS: macOS 15.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 66.05 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - ~/.nvm/versions/node/v21.2.0/bin/node
    Yarn: 4.5.0 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v21.2.0/bin/npm
    pnpm: 8.6.10 - /opt/homebrew/bin/pnpm
    bun: 1.1.29 - /opt/homebrew/bin/bun
  Browsers:
    Brave Browser: 124.1.65.130
    Chrome: 129.0.6668.60
    Chrome Canary: 131.0.6742.0
    Edge: 129.0.2792.65
    Firefox Nightly: 129.0a1
    Safari: 18.0
    Safari Technology Preview: 18.0

### Used Package Manager

yarn

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] 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 [vuejs/core](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[katreinhart]

I am also having this issue! Using 4.4.2 in a project I haven't touched in awhile, come back to it and HMR is not working at all. It's also having issues with "cannot find named export XXXX in file src/pages/xxx.js" when it's clearly there.

[hi-ogawa]

I see circular imports when running yarn dev --debug hmr, so I would guess that's a part of the issue.

  vite:hmr circular imports detected: /src/lite/views/Collection/DragAndDrop/useAnimationStyling.tsx -> /src/lite/views/Collection/DragAndDrop/DragAndDropGrid.tsx -> /src/lite/views/Collection/DragAndDrop/DNDVirtualRow.tsx -> /src/lite/views/Collection/DragAndDrop/DraggableWrapper.tsx -> /src/alignUI/ProductCard/ProductCard.tsx -> /src/lite/views/Collection/DragAndDrop/DragAndDropZones.tsx -> /src/lite/views/Collection/DragAndDrop/useZone.tsx -> /src/lite/views/Collection/DragAndDrop/useAnimationStyling.tsx +1ms
2:47:37 PM [vite] hmr update /src/lite/views/Collection/DragAndDrop/useZone.tsx
2:47:37 PM [vite] hmr invalidate /src/lite/views/Collection/DragAndDrop/useZone.tsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
  vite:hmr circular imports detected: /src/lite/views/Collection/DragAndDrop/DragAndDropZones.tsx -> /src/lite/views/Collection/DragAndDrop/useZone.tsx -> /src/lite/views/Collection/DragAndDrop/useAnimationStyling.tsx -> /src/lite/views/Collection/DragAndDrop/DragAndDropGrid.tsx -> /src/lite/views/Collection/DragAndDrop/DNDVirtualRow.tsx -> /src/lite/views/Collection/DragAndDrop/DraggableWrapper.tsx -> /src/alignUI/ProductCard/ProductCard.tsx -> /src/lite/views/Collection/DragAndDrop/DragAndDropZones.tsx +33ms
2:47:37 PM [vite] hmr update /src/lite/views/Collection/DragAndDrop/DragAndDropZones.tsx

In the past, circular import was triggering full reload, but that seems relaxed in #15118

If I add a log during import, then it always shows up, but not the one inside hook (meaning there's no re-rendering), so this could be an issue/limitation of React plugin specifically.

//// src/lite/views/Collection/DragAndDrop/useAnimationStyling.tsx
import { dndGridClass } from "./DragAndDropGrid";

console.log("[import]", Date.now(), dndGridClass); // this log shows up always

export function useAnimationStyling() {
  console.log("[hook]", Date.now(), dndGridClass);
}

---

I tried to reproduce the issue with 3 files https://github.com/hi-ogawa/reproductions/tree/main/vite-18217-hmr-circular-import-react and a same behavior seems to happen, but it's very rare.

[angelov-a]

I have also been experiencing this for a while. The HMR in a Vue project is very inconsistent and a change usually breaks the app, requiring a full reload.

[pwang2]

if any of your dependency is built from virtual module, we might have this problem. see other discussion in #12912

[natew]

For some reason I'm seeing this recently but only in Safari. No circular imports, it does hot reload (Safari console says it accepts), but for some reason no change. Likely unrelated to this, maybe even a new Safari bug, but just noting for anyone else if they see it too.

[yijinc]

I have same issue, I update any files hmr not work at all

[kristoffergarling]

I had the same issue, I tried:

• I tried mac OS upgrade.
• Switch node version
• Switched vite version
• Reinstall repo
• Different browsers

Solution: It was a package that caused it to not work. :(

[dannydi12]

I'm noticing the same problem, even in a fresh project when running:

yarn create vite my-project --template react-ts (node version 20 & 18)

With the default template, vite is unable to hot reload

[kamilbroniowski]

Same here VITE v6.2.2 - React-JS+SWC

[natew]

I realize we do actually have a virtual module and it does sometimes show warnings about not being able to update. Perhaps that's the area to look at first.

[maelp]

For me, HMR was working with .ts files, but not .vue files, so I added this to the vite.config.ts plugins:

    {
      name: "full-reload",
      handleHotUpdate({ server }) {
        server.ws.send({ type: "full-reload" });
        return [];
      },
    },