Circular dependency? Cannot access 'useUserStore' before initialization + HMR console errors

[cedric25]

Hi,

Currently switching from vuex to pinia in a medium-size Vue 3 codebase.

We have encountered some issue when migrating the user store, problems seem to be:

• importing the user store from the router, hence creating some circular dependency (we use the router to redirect to the login page if necessary)
• not lazy-loading components in the router

Here is a minimalist repository showing that app crashes at startup 👉 https://github.com/cedric25/try-pinia-repro
Error:

Uncaught ReferenceError: Cannot access 'useUserStore' before initialization

I've tried a few things: OptionAPI / CompositionAPI, Setup Stores / Option Store, mapState / storeToRefs...

Stop using mapState seems to fix the app crash, but HMR problems remain. (More info in the repo README)

There is probably nothing to fix in pinia, I'm just looking for advice :)

• Never import and use your router in your stores?
• Have all components being lazy-loaded in your router?
• Something else?