HMR not working when using store in router beforeEach

[tcisof]

Reproduction

Vue 3.2.30, vite 2.8.0, vue-router 4.0.12, pinia 2.0.11
I have beforeEach guard where I have method from file authorization.ts
like this:

import { checkAuthorization } from '~/Account/router/authorization';
router.beforeEach(async (to, from, next) => {
    await checkAuthorization(to)
    next();
}

And in authorization.ts I have:

const accountStore = useAccountStore();
export async function checkAuthorization(
  to: CloudRoute,
  from: RouteLocationRaw,
  next: NavigationGuardNext
): Promise<boolean> {
<here using some data from accountStore>
[...]
}

And when I'm editing something in component that is directly assigned to route component, hot reload doesn't work.

{
    path: '/#',
    name: AccountRoutesNames.Login,
    component: LoginViewVue, // or ()=> import('./views/#/#View.vue')
}

It works when I'm editing some things in child components or App.vue for example.

The errors I get in console when editing LoginView is:
ReferenceError: can't access lexical declaration 'useAccountStore' before initialization

[hmr] Failed to reload /src/Account/views/#/#View.vue. This could be due to syntax errors or importing non-existent modules. (see errors above)

Uncaught (in promise) TypeError: (destructured parameter) is undefined

When I don't use pinia stores in before each, everything works.

My setup: piniaInstall.ts

import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from '../App.vue';

const app = createApp(App);
app.use(createPinia());
export { app };

main.ts

import { app } from './_plugins/piniaInstall';
import ElementPlus from 'element-plus';
import i18n from './_plugins/i18n';
import router from './_plugins/router';

app.config.performance = import.meta.env.MODE === 'production';
app.use(i18n);
app.use(ElementPlus, { size: 'default' });
app.use(router);
app.mount('#app');

I made it by piniaInstall because there was error that pinia was accessed before installation.

Steps to reproduce the behavior

1. Go to LoginView.vue
2. Edit something in LoginView.vue
3. HMR doesn't work

When refreshing page, everything works.

Expected behavior

HMR should work, no errors

[tcisof]

I fixed that error. I had circular dependencies, accountStore in router and router in accountStore. Looks like problem with vite since in webpack there was no such problem.

[Kotoriii]

@tcisof Could you elaborate on this? I have the exact same issue, but I don't seem to have any circular dependencies

[tcisof]

@Kotoriii how do you use your store? Provide some code

[knobel-dk]

@nj-sketch To find the circular dependency in your project run madge --circular ${PATH_TO_YOUR_PROJECT_ROOT}. This requires you to install madge

[lkosvme]

I was in the same situation, and my problem was the part of loading the View file from 'router'
`
import { Dashboard } from '@/views'
{ path: '/', component: Dashboard }

-> component: () => Dashboard
`

[data-miner00]

Thanks bro that helped solve my issue :)

[amitchaudhary140]

I don't think I have circular dependency. But I do have lazy route for this component. If I refresh the page, it works fine, but as soon as I make any change in Lesson component and save, I get this error.

[tomaszcioch]

Show your code, I cannot help you based only on this error.

[amitchaudhary140]

@tciochsolv The issue got solved. Somehow, I think the error was misleading. The real issue in my code was that I was importing i18n instance from main.ts file inside onMounted() hook. So, I changed it to below code and it is working fine.

const { locale } = useI18n({ useScope: "global" });
onMounted(() => {
locale.value = profile.value.lang;
});

[reneweteling]

Hi all, so i have something similar, when i edit a .ts file HMR works fine, only when editing a .Vue file I'm getting the error ReferenceError: Cannot access 'useSessionStore' before initialization in this case its being triggered by a beforeEach method in the router

router.beforeEach(async (to, _from) => {
  // TODO: firure out how to fix this change on TS files goes fine
  // but a change to a .Vue file triggers: "ReferenceError: Cannot access 'useSessionStore' before initialization"
  const store = useSessionStore();
  if (!store.signedIn && to.name !== "login") {
    // redirect the user to the login page
    return { name: "login" };
  }
});

Obviously when reloading the page or deploying everything works as expected. Im using the default Vite setup as described on the VueJs site.

import { resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig(({ command }: any) => {
  const isDev = command !== "build";
  if (isDev) {
    // Terminate the watcher when Phoenix quits
    process.stdin.on("close", () => {
      process.exit(0);
    });

    process.stdin.resume();
  }

  return {
    plugins: [
      vue()
    ],
    server: {
      host: "0.0.0.0",
    },
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
      },
    },
    build: {
      target: "esnext", // build for recent browsers
      outDir: "../priv/static", // emit assets to priv/static
      emptyOutDir: true,
      sourcemap: true, // enable source map in dev build
      manifest: false, // do not generate manifest.json
      rollupOptions: {
        input: {
          main: "./src/main.ts",
        },
        output: {
          entryFileNames: "assets/[name].js", // remove hash
          chunkFileNames: "assets/[name].js",
          assetFileNames: "assets/[name][extname]",
        },
      },
    },
  };
});

Thanks

[tintin10q]

Did anyone solve this. I don't want to have to lazy load everything.

[andre-brdoch]

@tintin10q No solution, but I did try a fresh create vue app + vue router to confirm what is the standard behavior. The beforeEach hook does NOT get retriggered during vite HMR. Meaning that any critical code happening there will not get run again.
Now you can brute force the hook to run again by eg. importing the whole router object in each of your components. That is a pretty ugly solution though.
Either way, this seems to be an issue with Vue router, not with Pinia, since it is simply how their hooks behave during HMR.

[tintin10q]

Yeah ugly indeed. I ended up attaching the router to pinia which is a bit nicer.