"getActivePinia()" was called but there was no active Pinia

Question

I get the following error in the command line when having ssr-started (laravel 11 + vue + inertia) and trying to navigate after php artisan Inertia:start-ssr and after npm run build: The server starts without errors, the error appears when navigating, and apparently the app works, it's just the error message that appears in the backend, and I don't understand why:

 "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
This will fail in production.
    at useStore (file://.../node_modules/pinia/dist/pinia.mjs:1741:19)
    at setup (file://.../bootstrap/ssr/assets/App-c081f20a.js:25:19)
    at _sfc_main.setup (file://...bootstrap/ssr/assets/App-c081f20a.js:55:23)
    at callWithErrorHandling (...node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:203:19)

navigating the Error Call Stack, the App-c018...js looks in short way like this:

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "App",
  __ssrInlineRender: true,
  setup(__props) {
    console.log("App vue start");
    createPinia();
    const store = useAppStore();

I can't see where I additionally have to include pinia. Without the ssr i get no errors, it's just with the ssr started that the error appears, and I understand also where the error comes from, but I don't get why it fails or where I'd have to include pinia aditionally to avoid the error, as I cannot reference the app itseld in the App.vue for obvious reasons.

My ssr.js

    import { createSSRApp, h } from 'vue';
    import { renderToString } from '@vue/server-renderer';
    import { createInertiaApp } from '@inertiajs/vue3';
    import createServer from '@inertiajs/vue3/server';
    import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
    import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
    import {createPinia} from "pinia";
    const pinia = createPinia();
    
    const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
    
    createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
        setup({ App, props, plugin }) {
            return createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                .use(pinia);
        },
    })
);

The main.js and app.js both include pinia references and work fine.

Answer 1

You can try to move the line .use(pinia) further up, to have it as 1st or 2nd use entry. If either of the two plugins before it accesses anything from a Pinia store, it will result in the error you see ("Are you trying to use a store before calling app.use(pinia)?"),