Inconsistent Router Injection Error with Additional Resolvers

[sghng]

Describe the bug

When using additional component resolvers, the application becomes blank after a while, with the following browser console errors:

[Vue warn]: injection "Symbol(router)" not found.
[Vue warn]: injection "Symbol(route location)" not found.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'currentRoute')

This is very weird problem. Sometimes the slides work fine, everything including the PrimeVue components are displayed correctly, but after a few seconds app div will become blank. Sometimes the slides don't load at all.

Minimal reproduction

Note that this problem is not reproduced consistently. Here's what my customization looks like:

// main.ts
import { defineAppSetup } from "@slidev/types";
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";

export default defineAppSetup(({ app }) => {
  // TODO: support specifying themes in head matter
  app.use(PrimeVue, {
    theme: {
      preset: Aura,
      options: {
        // PrimeVue uses system dark mode selector by default, which conflicts
        // with the toggle in Slidev
        darkModeSelector: ".dark"
      }
    },
  });
});

/// <reference types="@slidev/types" />

import { defineConfig } from "vite";
import { PrimeVueResolver } from "@primevue/auto-import-resolver";

export default defineConfig({
  slidev: {
    components: {
      resolvers: [PrimeVueResolver()],
    },
  },
});

1. Install the addon using npm install slidev-addon-prime
2. Add the addon to slides.md:

---
addons:
  - prime
---

3. (optional) add some PrimeVue components

<div class="card flex justify-center flex-wrap gap-4">
  <Button label="Primary" />
  <Button label="Secondary" severity="secondary" />
</div>

4. Run slidev.

Potential Causes

Interference between the router injection and other resolvers.

[kermanx]

Quite similar to #1925. It will be easier to debug if we have the stack trace

[sghng]

Quite similar to #1925. It will be easier to debug if we have the stack trace

Here's a stack trace:

hook.js:608 [Vue warn]: injection "Symbol(router)" not found.
overrideMethod @ hook.js:608
hook.js:608 [Vue warn]: injection "Symbol(route location)" not found.
overrideMethod @ hook.js:608
hook.js:608 [Vue warn]: Unhandled error during execution of setup function 
  at <App>
overrideMethod @ hook.js:608
useNav.ts?v=a9c96c42:174 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'currentRoute')
    at ComputedRefImpl.fn (useNav.ts?v=a9c96c42:174:12)
    at refreshComputed (reactivity.esm-bundler.js?v=a9c96c42:353:29)
    at get value (reactivity.esm-bundler.js?v=a9c96c42:1558:5)
    at useNav.ts?v=a9c96c42:178:39
    at index.mjs?v=a9c96c42:150:31
    at EffectScope.run (reactivity.esm-bundler.js?v=a9c96c42:66:16)
    at index.mjs?v=a9c96c42:150:21
    at useNav.ts?v=a9c96c42:249:17
    at index.mjs?v=a9c96c42:150:31
    at EffectScope.run (reactivity.esm-bundler.js?v=a9c96c42:66:16)

I revisited my project and it somehow works. Then I deleted node_modules and reinstall the dependencies, and then the problem re-occurred.

The exception is at:

const useNavState = createSharedComposable( () => {
    const router = useRouter();
    const currentRoute = useRoute();
    const query = computed( () => {
        router.currentRoute.value.query; // exception here
        return new URLSearchParams(location.search);
    }
    );

[sghng]

Just discovered that this bug will disappear once I clear browser cache and refresh for several times. It will occur again if I delete node_modules and reinstall them.

[kermanx]

I think this is the same problem as #1925. After revising the problem, I find this quite strange. Logically, the useNavState function can't be called before Symbol(router) is injected, but somehow it sometimes actually does.

[sghng]

I also noticed some runtime warnings in browser about Symbol(router), but they don't always crash the app.