When using JSX and there is a circular dependency, the component state will be reset

[youthug]

Describe the bug

In the development environment of our project with Vite + Vue2.7 + Vuex + Vue Router, we encountered an issue where there is a circular reference between src/store/modules/user.js and src/router/index.js. Modifying any JSX code seems to cause the state of src/store referenced elsewhere (src/utils/permission.js) to be reset after HMR. We have to refresh the page, which is very bad for the development experience.

Reproduction

https://github.com/youthug/vite-vuex-state-repro.git

Steps to reproduce

1.  git clone https://github.com/youthug/vite-vuex-state-repro.git
    cd vite-vuex-state-repro
    yarn
    yarn dev
   

2. Editing any code in each file in the src/components folder to see the changes on the page.

System Info

  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 363.20 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.1/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
    pnpm: 7.29.0 - ~/.nvm/versions/node/v16.19.1/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.4.1
  npmPackages:
    @vitejs/plugin-vue2: ^2.3.1 => 2.3.1
    vite: ^4.5.3 => 4.5.3

Used Package Manager

yarn