Skip to content

HMR duplicated modules in case of fast sequentional changes #10118

@Amareis

Description

@Amareis

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:

  1. Change file (just print 1 somewhere in JSX)
  2. Ctrl+S
  3. Immediately change file again (print 2)
  4. Ctrl+S
  5. After page loading, there is duplicating JS imports with different timestamps and whole build is broken until next HMR:
    image
    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.0

Used Package Manager

yarn

Logs

Second reload on line 100
  vite:hmr [file change] reviews/short-review.tsx +9s
17:41:42 [vite] hmr update /reviews/short-review.tsx
  vite:hmr [file change] reviews/short-review.tsx +66ms
17:41:42 [vite] hmr update /reviews/short-review.tsx (x2)
  vite:load 2.29ms [fs] /reviews/short-review.tsx +9s
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +9s
  vite:hmr [self-accepts] reviews/short-review.tsx +210ms
  vite:import-analysis 21.07ms [26 imports rewritten] reviews/short-review.tsx +20ms
  vite:transform 208.68ms /reviews/short-review.tsx +9s

  vite:load 7.11ms [fs] /chats/chat-messaging/index.ts +220ms
  vite:load 8.05ms [fs] /reviews/reviews-list/index.tsx +1ms
  vite:load 28.01ms [fs] /user-profile/index.tsx +19ms
  vite:load 41.74ms [fs] /reviews/full-review/index.tsx +14ms
  vite:time 281.07ms /reviews/short-review.tsx +7s
  vite:time 101.18ms /reviews/short-review.tsx +3ms
  vite:import-analysis 55.79ms [5 imports rewritten] chats/chat-messaging/index.ts +131ms
  vite:transform 117.97ms /chats/chat-messaging/index.ts +129ms

  vite:import-analysis 74.38ms [8 imports rewritten] user-profile/index.tsx +18ms
  vite:transform 115.97ms /user-profile/index.tsx +19ms

  vite:import-analysis 89.44ms [8 imports rewritten] reviews/reviews-list/index.tsx +15ms
  vite:transform 151.09ms /reviews/reviews-list/index.tsx +15ms

  vite:import-analysis 97.14ms [15 imports rewritten] reviews/full-review/index.tsx +8ms
  vite:transform 129.50ms /reviews/full-review/index.tsx +12ms

  vite:time 1.05ms /chats/chat-messaging/index.ts +127ms
  vite:load 84.68ms [fs] /app-shell/index.ts +170ms
  vite:load 55.94ms [fs] /user-profile/block.tsx +3ms
  vite:load 224.08ms [fs] /user-profile/frame.ts +168ms
  vite:load 221.90ms [fs] /reviews/reviews-list/frame.ts +2ms
  vite:load 206.65ms [fs] /report-content/index.ts +1ms
  vite:load 199.06ms [fs] /reviews/reviews-list/index.tsx +9ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react-dom.js?v=89653327 needs interop +255ms
  vite:import-analysis 24.93ms [7 imports rewritten] report-content/index.ts +20ms
  vite:transform 56.04ms /report-content/index.ts +270ms

  vite:import-analysis 32.92ms [10 imports rewritten] reviews/reviews-list/frame.ts +8ms
  vite:transform 64.99ms /reviews/reviews-list/frame.ts +8ms
  vite:import-analysis 33.53ms [10 imports rewritten] app-shell/index.ts +0ms
  vite:transform 237.96ms /app-shell/index.ts +1ms

  vite:import-analysis 57.91ms [20 imports rewritten] user-profile/frame.ts +25ms
  vite:transform 92.06ms /user-profile/frame.ts +25ms

  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +12ms
  vite:import-analysis 16.30ms [8 imports rewritten] reviews/reviews-list/index.tsx +11ms
  vite:transform 103.44ms /reviews/reviews-list/index.tsx +23ms

  vite:hmr [self-accepts] user-profile/block.tsx +519ms
  vite:import-analysis 30.74ms [28 imports rewritten] user-profile/block.tsx +15ms
  vite:transform 300.47ms /user-profile/block.tsx +17ms

  vite:load 316.66ms [fs] /reviews/full-review/index.tsx +125ms
  vite:load 402.71ms [fs] /user-profile/index.tsx +85ms
  vite:import-analysis 19.36ms [8 imports rewritten] user-profile/index.tsx +134ms
  vite:transform 50.58ms /user-profile/index.tsx +140ms

  vite:import-analysis 37.64ms [15 imports rewritten] reviews/full-review/index.tsx +19ms
  vite:transform 146.16ms /reviews/full-review/index.tsx +11ms

  vite:load 276.37ms [fs] /app-shell/index.ts +65ms
  vite:load 212.30ms [fs] /app-shell/model.ts +9ms
  vite:load 214.76ms [fs] /app-shell/screen.tsx +2ms
  vite:load 228.40ms [fs] /user-profile/logout.tsx +27ms
  vite:load 238.74ms [fs] /trusted-users/index.ts +11ms
  vite:load 201.69ms [fs] /user-profile/profile-header.tsx +3ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react-dom.js?v=89653327 needs interop +136ms
  vite:import-analysis 15.46ms [3 imports rewritten] trusted-users/index.ts +11ms
  vite:transform 93.06ms /trusted-users/index.ts +147ms
  vite:import-analysis 20.07ms [4 imports rewritten] user-profile/logout.tsx +4ms
  vite:transform 110.10ms /user-profile/logout.tsx +5ms

  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +4ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react-dom.js?v=89653327 needs interop +1ms
  vite:import-analysis 34.59ms [10 imports rewritten] app-shell/index.ts +10ms
  vite:transform 162.06ms /app-shell/index.ts +13ms
  vite:time 440.76ms /app-shell/index.ts +639ms

  vite:import-analysis 45.43ms [16 imports rewritten] app-shell/model.ts +11ms
  vite:transform 164.10ms /app-shell/model.ts +11ms

  vite:import-analysis 52.52ms [21 imports rewritten] app-shell/screen.tsx +7ms
  vite:transform 168.58ms /app-shell/screen.tsx +8ms

  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +8ms
  vite:hmr [self-accepts] user-profile/profile-header.tsx +381ms
  vite:import-analysis 78.67ms [16 imports rewritten] user-profile/profile-header.tsx +76ms
  vite:transform 212.70ms /user-profile/profile-header.tsx +85ms

  vite:time 743.62ms /reviews/reviews-list/index.tsx +106ms

  vite:time 0.77ms /app-shell/model.ts +12ms




  vite:hmr [file change] reviews/short-review.tsx +62ms
17:41:44 [vite] hmr update /reviews/short-review.tsx (x3)




  vite:time 755.45ms /user-profile/index.tsx +5ms
  vite:time 753.55ms /reviews/full-review/index.tsx +1ms
  vite:load 142.10ms [fs] /trusted-users/actions.ts +236ms
  vite:load 143.38ms [fs] /trusted-users/frame.ts +2ms
  vite:load 144.72ms [fs] /trusted-users/view.tsx +1ms
  vite:load 141.03ms [fs] /main-screen/index.tsx +27ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +80ms
  vite:import-analysis 10.70ms [4 imports rewritten] trusted-users/actions.ts +7ms
  vite:transform 62.73ms /trusted-users/actions.ts +85ms

  vite:import-analysis 23.75ms [11 imports rewritten] trusted-users/frame.ts +13ms
  vite:transform 74.33ms /trusted-users/frame.ts +13ms

  vite:import-analysis 26.85ms [13 imports rewritten] trusted-users/view.tsx +3ms
  vite:transform 76.63ms /trusted-users/view.tsx +4ms

  vite:load 90.42ms [fs] /app-shell/screen.tsx +57ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +56ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react-dom.js?v=89653327 needs interop +1ms
  vite:hmr [detected api usage] main-screen/index.tsx +150ms
  vite:import-analysis 22.27ms [12 imports rewritten] main-screen/index.tsx +14ms
  vite:transform 120.69ms /main-screen/index.tsx +71ms

  vite:import-analysis 31.54ms [21 imports rewritten] app-shell/screen.tsx +9ms
  vite:transform 73.12ms /app-shell/screen.tsx +9ms

  vite:load 102.57ms [fs] /trusted-users/view.tsx +81ms
  vite:load 109.54ms [fs] /reviews/reviews-list/frame.ts +24ms
  vite:load 108.98ms [fs] /main-screen/index.tsx +2ms
  vite:load 132.29ms [fs] /reviews/short-review.tsx +22ms
  vite:load 244.37ms [fs] /user-profile/block.tsx +115ms
  vite:load 293.76ms [fs] /main-screen/main-menu/index.tsx +117ms
  vite:load 326.87ms [fs] /main-screen/model.ts +33ms
  vite:load 318.98ms [fs] /main-screen/index.tsx +1ms
  vite:load 334.74ms [fs] /user-profile/frame.ts +17ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +345ms
  vite:hmr [detected api usage] main-screen/index.tsx +399ms
  vite:import-analysis 44.68ms [10 imports rewritten] reviews/reviews-list/frame.ts +42ms
  vite:transform 353.63ms /reviews/reviews-list/frame.ts +387ms
  vite:time 468.80ms /reviews/reviews-list/frame.ts +552ms

  vite:import-analysis 54.85ms [12 imports rewritten] main-screen/index.tsx +10ms
  vite:transform 362.81ms /main-screen/index.tsx +10ms

  vite:import-analysis 59.96ms [13 imports rewritten] trusted-users/view.tsx +5ms
  vite:transform 393.81ms /trusted-users/view.tsx +5ms

  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +8ms
  vite:hmr [self-accepts] reviews/short-review.tsx +80ms
  vite:import-analysis 60.27ms [26 imports rewritten] reviews/short-review.tsx +58ms
  vite:transform 443.60ms /reviews/short-review.tsx +98ms

  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +46ms
  vite:hmr [self-accepts] main-screen/main-menu/index.tsx +70ms
  vite:import-analysis 26.80ms [12 imports rewritten] main-screen/model.ts +20ms
  vite:transform 212.14ms /main-screen/model.ts +34ms

  vite:import-analysis 40.28ms [18 imports rewritten] main-screen/main-menu/index.tsx +14ms
  vite:transform 261.30ms /main-screen/main-menu/index.tsx +15ms

  vite:hmr [self-accepts] user-profile/block.tsx +20ms
  vite:import-analysis 50.77ms [28 imports rewritten] user-profile/block.tsx +10ms
  vite:transform 388.68ms /user-profile/block.tsx +11ms

  vite:hmr [detected api usage] main-screen/index.tsx +29ms
  vite:import-analysis 26.03ms [12 imports rewritten] main-screen/index.tsx +34ms
  vite:transform 268.76ms /main-screen/index.tsx +31ms

  vite:import-analysis 31.08ms [20 imports rewritten] user-profile/frame.ts +5ms
  vite:transform 256.69ms /user-profile/frame.ts +5ms
  vite:time 593.42ms /user-profile/frame.ts +206ms

  vite:time 766.88ms /app-shell/screen.tsx +5ms

  vite:time 9.44ms /reviews/full-review/index.tsx +33ms

  vite:time 0.70ms /user-profile/index.tsx +9ms
  vite:load 156.12ms [fs] /chats/chat-messaging/index.ts +321ms
  vite:load 157.71ms [fs] /reviews/reviews-list/index.tsx +2ms
  vite:load 139.02ms [fs] /reviews/search-reviews/index.tsx +18ms
  vite:load 214.11ms [fs] /trusted-users/index.ts +75ms
  vite:load 195.22ms [fs] /reviews/short-review.tsx +3ms
  vite:load 312.61ms [fs] /app-shell/index.ts +155ms
  vite:load 314.06ms [fs] /report-content/index.ts +1ms
  vite:time 1052.59ms /main-screen/index.tsx +333ms
  vite:time 1059.83ms /reviews/short-review.tsx +6ms
  vite:time 1076.40ms /user-profile/block.tsx +19ms
  vite:load 378.06ms [fs] /report-content/index.ts +89ms
  vite:import-analysis 46.13ms [3 imports rewritten] trusted-users/index.ts +477ms
  vite:transform 318.40ms /trusted-users/index.ts +478ms

  vite:import-analysis 51.14ms [5 imports rewritten] chats/chat-messaging/index.ts +5ms
  vite:transform 417.86ms /chats/chat-messaging/index.ts +5ms

  vite:import-analysis 90.65ms [8 imports rewritten] reviews/reviews-list/index.tsx +40ms
  vite:transform 457.12ms /reviews/reviews-list/index.tsx +40ms

  vite:hmr [detected api usage] reviews/search-reviews/index.tsx +563ms
  vite:import-analysis 129.59ms [24 imports rewritten] reviews/search-reviews/index.tsx +39ms
  vite:transform 509.43ms /reviews/search-reviews/index.tsx +71ms

  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react-dom.js?v=89653327 needs interop +85ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react.js?v=89653327 needs interop +17ms
  vite:import-analysis 106.08ms [7 imports rewritten] report-content/index.ts +69ms
  vite:import-analysis 119.59ms [7 imports rewritten] report-content/index.ts +13ms
  vite:transform 427.48ms /report-content/index.ts +152ms
  vite:transform 339.12ms /report-content/index.ts +1ms
  vite:time 719.65ms /report-content/index.ts +342ms
  vite:time 369.96ms /report-content/index.ts +1ms

  vite:import-analysis 149.45ms [10 imports rewritten] app-shell/index.ts +30ms
  vite:transform 458.60ms /app-shell/index.ts +29ms

  vite:hmr [self-accepts] reviews/short-review.tsx +252ms
  vite:import-analysis 197.53ms [26 imports rewritten] reviews/short-review.tsx +48ms
  vite:transform 660.91ms /reviews/short-review.tsx +50ms

  vite:time 6.80ms /trusted-users/index.ts +94ms

  vite:time 1.46ms /user-profile/logout.tsx +22ms

  vite:time 1.58ms /main-screen/index.tsx +17ms

  vite:time 1.46ms /main-screen/main-menu/index.tsx +12ms

  vite:time 1.84ms /main-screen/model.ts +15ms
  vite:load 850.17ms [fs] /app-shell/index.ts +507ms

  vite:time 1.38ms /chats/chat-messaging/index.ts +17ms

  vite:time 1.15ms /user-profile/profile-header.tsx +13ms

  vite:time 0.75ms /trusted-users/actions.ts +11ms

  vite:time 11.31ms /trusted-users/frame.ts +16ms

  vite:time 1.94ms /trusted-users/view.tsx +17ms
  vite:import-analysis /@fs/home/joe/work/ppldo-front/node_modules/.vite/deps/react-dom.js?v=89653327 needs interop +168ms
  vite:import-analysis 13.04ms [10 imports rewritten] app-shell/index.ts +13ms
  vite:transform 80.37ms /app-shell/index.ts +178ms
  vite:time 941.81ms /app-shell/index.ts +21ms

  vite:load 217.86ms [fs] /app-shell/model.ts +96ms
  vite:import-analysis 38.73ms [16 imports rewritten] app-shell/model.ts +49ms
  vite:transform 44.01ms /app-shell/model.ts +50ms

  vite:time 0.87ms /app-shell/model.ts +57ms

  vite:time 8.36ms /app-shell/screen.tsx +9ms
  vite:load 140.27ms [fs] /reviews/reviews-list/index.tsx +68ms
  vite:load 104.10ms [fs] /reviews/search-reviews/index.tsx +16ms
  vite:import-analysis 5.33ms [8 imports rewritten] reviews/reviews-list/index.tsx +125ms
  vite:transform 99.87ms /reviews/reviews-list/index.tsx +125ms

  vite:hmr [detected api usage] reviews/search-reviews/index.tsx +401ms
  vite:import-analysis 19.40ms [24 imports rewritten] reviews/search-reviews/index.tsx +28ms
  vite:transform 113.20ms /reviews/search-reviews/index.tsx +29ms

  vite:time 295.29ms /reviews/reviews-list/index.tsx +162ms
  vite:time 254.44ms /reviews/search-reviews/index.tsx +11ms

  vite:time 3.44ms /reviews/reviews-list/frame.ts +26ms

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions