vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
67.43k stars 6.07k forks source link

HMR is often not working at all #18217

Open danieltroger opened 19 hours ago

danieltroger commented 19 hours ago

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: https://github.com/vitejs/vite/issues/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):

https://github.com/user-attachments/assets/19c40415-4e75-464c-bc85-e06411e5b1bf

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 commented 17 hours ago

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.