HMR: layout component disappears after making changes to page

[mrDinckleman]

Hello.

I'm trying to use the unplugin-vue-router plugin with the vite-plugin-vue-layouts plugin and I encountered a bug.

When changing any page component (@/pages/index.vue or @/pages/about.vue) and HMR is triggered, the layout component stops rendering, it just disappears.

The same problem occurs with another plugin - vite-plugin-vue-meta-layouts.

I made a repository with several branches, a clean installation via npm create vue@latest, you can see it here:

https://stackblitz.com/~/github.com/mrDinckleman/auto-router-layout-hmr-bug?file=src/App.vue

Branches:

• layouts - only vite-plugin-vue-layouts is installed
• meta-layouts - only vite-plugin-vue-meta-layouts is installed
• auto-routes - only unplugin-vue-router is installed
• layouts-with-auto - vite-plugin-vue-layouts + unplugin-vue-router are installed
• meta-layouts-with-auto - vite-plugin-vue-meta-layouts + unplugin-vue-router are installed

The bug can be seen in the last two branches. When changing any of the pages, the inscription in the upper left corner with the name of the used layout disappears.

If I remove the snippet from @/router/index.ts:

if (import.meta.hot) {
  handleHotUpdate(router)
}

then when making changes, the browser page is reloaded, and the console displays:

[vite] (client) hmr invalidate /__vue-router/auto-routes [unplugin-vue-router:HMR] Cannot replace the routes because there is no active router. Reloading.

I'm not sure if the problem is in your plugin, but maybe you can help me. Thanks