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?

[pei-han]

Review the import structure of the files involved. Refactor your code to break the loop, perhaps by separating shared logic into a utility file that neither store depends on.
For router configurations, use dynamic imports for components to ensure they are loaded lazily, only after Pinia is fully initialized.

[cedric25]

Hey, thanks for your answer 😀

For router configurations, use dynamic imports

Yes that's probably the easiest fix.