This is a nice workaround but I think we should aim for a proper fix no matter where the source of the bug is 😄

This is a nice workaround but I think we should aim for a proper fix no matter where the source of the bug is 😄

Fair enough! 😅

Some things I noted

• The problem occurs with and without auto-import enabled
• Using import { useRoute, useRouter } from 'vue-router' works fine, but as soon as it is changed to from 'vue-router/auto it breaks.
• Importing createRouter/createWebHistory from 'vue-router/auto' in my router.ts does not cause the problem

It looks like the cycle is:

• component imports from virtual:vue-router/auto
• virtual:vue-router/auto imports from virtual:vue-router/auto/routes
• virtual:vue-router/auto/routes imports component (completing the cycle)

I will just resort to disabling VueRouterAutoImports and importing from vue-router for now when importing useRoute/useRouter.
Looks like these are just re-exported from vue-router anyways. And I have not yet encountered a case where I need the extra typing from vue-route/auto in those cases.

The importMode: 'async'-workaround is not really feasable in my case because I don't want to handle loading states between pages, and I want the same feel in dev and production (transitions etc).

I guess the cycle could be broken by moving createRouter (and the auto/routes import) to its own sub-module like vue-router/auto/configuration

Another thing that works is to export routes from vue-router/auto/routes/ as a function instead and updating createRouter to call that function.

I think I'm getting the same error now even when using async - I have circular dependencies everywhere and it is all pointed to virtual:vue-router/auto -> virtual:vue-router/auto/routes

Is there some way to work out what exactly is causing the circular imports?

also experiencing this issue, with default configuration and async. Not sure how to fix