HMR duplicated modules in case of fast sequentional changes #10118
Comments
|
Initially discussed in #2255 |
|
Also cc @nielslanting, he report similar error with Vue. |
|
@Amareis I'm struggling with the same issue in my project. Thank you for creating reproduction repo! I wanted to create a ticket for that but I couldn't find the way how to reproduce that outside project I'm working on. |
Yep, that's tricky to reproduce - you need big project and slow build (thanks to react-plugin babel compiler), I spent hours to create example. And this issue still smack me ten times a day, so I really want to fix it. Maybe it even worse because of eslint autofix on save, but in any case vite should handling such case carefully. I think, trouble is: when I changes file first time, all of importers invalidates. Browser start reloading, vite starts to rebuild all invalidated files and there boom, second change, all importers invalidated again and this is somehow overlapped and ends with incosistent duplicated imports. @patak-dev maybe you have some throughts on this? |
|
@Amareis I have enabled prettier plugin on save to format the file, so the file is written twice very fast. I have the same observation. |
|
I suppose the ideal solution would wait until the pending HMR is fully completed before starting the next one. Even if multiple changes happen while the HMR is pending, only the last one should make it to the next HMR. Is there a way for the dev server to know when the HMR is finished? |
|
Maybe not-so-ideal solution is adding some throttling to hmr updates... I got duplicate "hot updated" mesage on every file change, because of eslint. |
Describe the bug
Sometimes HMR somehow mess with modules, so it ends with error (in my case it's TDZ error - Cannot access SomeClass before initializing), and whole build became broken until next HMR or server restart. That's definitely caused by changing the file while hmr in process.
So, basically, I get big-enough project, then:
This is picture after page reloading - there is two versions of my module. Since it imports stateful modules, I got my custom validation error, so this inconsistency became visible.
I think there is even falling test for it at https://github.com/vitejs/vite/blob/main/playground/ssr-vue/__tests__/ssr-vue.spec.ts#L166
And there is sceencast of this error on example project, I edit file
src/reviews/short-review.tsx:Screen recording 13.09.2022 20:36:15.webm
Sorry for big example, but I think that's crucial for this bug, since it's related to big modules graph. Also, react plugin isn't necessary for this bug, but it make it much more reproducible.
Reproduction
https://github.com/Amareis/vite-bug-example
System Info
System: OS: Linux 5.15 Ubuntu 22.04 LTS 22.04 (Jammy Jellyfish) CPU: (8) x64 AMD Ryzen 5 3400G with Radeon Vega Graphics Memory: 5.22 GB / 13.60 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node Yarn: 3.2.1 - ~/.nvm/versions/node/v18.9.0/bin/yarn npm: 8.19.1 - ~/.nvm/versions/node/v18.9.0/bin/npm Browsers: Chrome: 104.0.5112.101 npmPackages: @vitejs/plugin-react: ^2.0.0 => 2.1.0 vite: ^3.1.0 => 3.1.0Used Package Manager
yarn
Logs
Second reload on line 100
Validations
The text was updated successfully, but these errors were encountered: