The state data of Vuex may be reset when using JSX, if there is a circular dependency

[youthug]

trafficstars

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

[youthug]

~~moved: https://github.com/vitejs/vite/issues/17450~~

[youthug]

I found a simpler way to fix this. Add the following code in src/store/index.js. Not sure if it will have any unexcepted effects.

if (import.meta.hot) { // for tree-shaking
    import.meta.hot.accept(
        [
            './modules/user.js',
        ],
        () => {
            // Not handling hot updates;
            // the purpose is to resolve the issue where the state is reset
            // after Vite HMR due to circular dependencies
            window.location.reload()
        },
    )
}