HMR error: Cannot access 'useAuthStore' before initialization

[Kotoriii]

Hi, I need to access the store on a router.beforeEach(). I am aware about initialization outside normal components here: https://pinia.vuejs.org/core-concepts/outside-component-usage.html#single-page-applications

I've tried to replicate it, but if I change something about the file I'm currently navigating in, I still get a Cannot access 'useAuthStore' before initialization from the HMR. Any changes to other files seem to hot reload correctly. If I refresh the page manually, the error disappears.

Here is my code:

// routes.js
import { createRouter, createWebHistory } from "vue-router";
import { useAuthStore } from "@/stores/userAuth";

const router = createRouter({
    history: createWebHistory(),
    routes: [
       {
            path: "/foo/bar",
            name: "MyComponent",
            component: () => import("@/views/foo/bar.vue"),
            meta: { requiresAuth: true },
       }
    ]
})

router.beforeEach((to, from, next) => {
    const authStore = useAuthStore(); // error is here! Also using an async await still yields the error
    authStore.togglePageLoading();
    ....
});

router.afterEach(() => {
    const authStore = useAuthStore();
    authStore.togglePageLoading();
});

// main.js

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

export const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

// userAuth.ts

import { defineStore, acceptHMRUpdate } from "pinia";
import FooService from "@/services/Foo";
import router from "@/router"; // I thought this might be a circle dependency issue, but the issue persists without this import and its use here

const fooService = FooService.getInstance();

export const useAuthStore = defineStore({
    id: "userAuth",
    state: () => ({
      ...
    }),
    actions: {
       ....
    },
});

// make sure to pass the right store definition, `useAuth` in this case.
if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot));
}

export default { useAuthStore };

Am I doing something wrong? The initialization should happen, but it just doesn't. Any help is greatly appreciated.

[posva]

what page are you on and what file do you change exactly? it's as if the main.ts gets invalidated and reloaded

[Kotoriii]

I am on a regular page inside the app, and I change an arbitrary line on its vue component. It's structure might have cascading but it shouldn't be an issue, right?

[posva]

mmh, I guess it would be easier to check with a boiled down example

[Kotoriii]

I will try and create a barebones project to replicate. In the meantime, the routes are lazily loaded. Does this might have anything to do with the issue?

[Kotoriii]

It turns out the App.vue component was being re-rendered entirely or something along those lines due to a badly coded PrimeVue tooltip from my part, that was being injected with app.config.globalProperties.$toast and was causing this issue. Once I commented out this code, things are hot reloading without errors now. Thank you so much and sorry for the inconvencience!