Help fixing HMR circular imports

[camtheman256]

Not sure if this should be an issue or not, but I'm struggling to get HMR to work with Vite whenever a page contains any router imports because of circular imports. We have a pretty standard config, so I don't know if something we're doing is causing it. Using importMode: 'async' doesn't help, and I couldn't find anything in #132 that helped.

I'm using vue-router 4.3.0 and unplugin-vue-router 0.8.6 (latest as of writing).

Logs

vite:hmr [file change] src/components/DDView.vue +9s
  vite:hmr [vue:update(template)] /Users/cmk/RiderProjects/api-klimate/admin-frontend/src/components/DDView.vue +0ms
  vite:hmr circular imports detected: /src/components/DDView.vue -> virtual:vue-router/auto -> virtual:vue-router/auto-routes -> /src/pages/due-diligence/form/[category].vue -> /src/components/DDView.vue +18ms

vite.config.ts

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // Allows for loading env variables from .env files
  const env = loadEnv(mode, process.cwd(), '');
  return {
    plugins: [
      vueRouter(),
      vue(),
      sentryVitePlugin({
        org: 'xxxx',
        project: 'xxxxxx',
        authToken: env.SENTRY_AUTH_TOKEN,
      }),
    ],

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    server: {
      port: 4200,
      proxy: {
        '/api': {
          target: 'http://localhost:7217',
          rewrite: (path) => path.replace('/api', ''),
        },
        '/graphql': 'http://localhost:5098/graphql',
      },
    },

    build: {
      sourcemap: true,
      target: 'es2022',
    },

    esbuild: {
      target: 'es2022',
    },

    optimizeDeps: {
      esbuildOptions: {
        target: 'es2022',
      },
    },
  };
});

router/index.ts

import { authGuard } from '@auth0/auth0-vue';
import { createRouter, createWebHistory } from 'vue-router/auto';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  extendRoutes(routes) {
    routes.push({
      name: 'Admin redirect',
      path: '/admin/:path(.*)',
      redirect(to) {
        return '/' + to.params.path;
      },
    });
    return routes;
  },
});
router.beforeEach((to) => {
  if (!to.path.startsWith('/public')) {
    return authGuard(to);
  } else {
    window.location.replace(import.meta.env.VITE_REGISTRY_URL + to.path.substring(7));
  }
});

export default router;

main.ts

const app = createApp(App);
// ...
app.use(router);
// ...
app.mount('#app');

[posva]

This is fixed now ✨