Subscribe on changes!

KeepAlive encountering error during scheduler flush on hot module reloading (Vite)

avatar
May 20th 2022

Link to minimal reproduction

https://github.com/MJZwart/flush-bug

Steps to reproduce

  • npm install
    
  • npm run dev
    
  • Go to localhost:3000 where the app is running
    
  • Click on any of the two tabs
    
  • In the IDE (In my case VSCode) go to Tab1.vue or Tab2.vue (any will work)
    
  • Comment out the console.log in the script or uncomment it, or create any addition to the script that won't fail in itself. Any changes made in the Tab1/2.vue that requires hot module reloading will trigger the bug.
    
  • Save the page and wait for Vite to reload the module.
    

What is expected?

It is expected that Vite will reload the module as it does everywhere else, reloading the code as it is saved in the file and showing the newest version on the screen. Note that this happens everywhere else that doesn't include KeepAlive with dynamic tabs.

What is actually happening?

The saved code does not get reloaded, instead an error is thrown: In yellow: [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. In red: Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function The website stays as it is and needs additional input to continue (mainly a full reload of the page)

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 794.12 MB / 7.93 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.47)
    Internet Explorer: 11.0.19041.1566

Any additional comments?

When searching for a solution to this bug, I have found only a handful of English websites, one of which offering a possible solution: using a unique key for the dynamic component. However, since I already use a unique key, this did not work for me. I ran into this bug in my personal project, in which I use Vite + Vue 3 and have a few pages using tabs as dynamic components, wrapped in a KeepAlive. Without the KeepAlive, this problem doesn't exist, but also doesn't give any of the benefits of using KeepAlive.

avatar
Jun 30th 2022

The latest version still has this problem

avatar
Aug 8th 2022

The latest version still has this problem