useNuxtApp() and useRuntimeConfig not available in pinia store during SSR

[stephenjason89]

Environment

---

• Operating System: Darwin
• Node Version: v18.7.0
• Nuxt Version: 2.16.0-27616340.013f051b
• Package Manager: [email protected]
• Builder: webpack
• User Config: buildDir, srcDir, bridge, components, ssr, dev, alias, image, generate, head, typescript, publicRuntimeConfig, privateRuntimeConfig, css, loading, loadingIndicator, plugins, buildModules, modules, proxy, axios, vuetify, build, serverHandlers, devServerHandlers
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: (), [email protected], [email protected], @pinia/[email protected], ~/modules/apolloSSR, @nuxt/[email protected]

---

Reproduction

https://github.com/vuejs/pinia/discussions/1526

Describe the bug

I am getting this error

When running this pinia actions during SSR

I rolled back to the old this.$nuxt for now to temporarily solve the issue

Additional context

The page being loaded uses the default.vue layout which has an apollo query "labels"

So that, together with this query causes the error.

No response

Logs

No response

[stephenjason89]

I think this might be related, @danielroe @antlionguard

https://github.com/nuxt/bridge/issues/436

The reproduction needs to have SSR:true in order to see the error

The stackblitz was not using SSR

[Lanayx]

I experience this as well https://github.com/vuejs/pinia/discussions/1513

[stephenjason89]

@Lanayx for the meantime this.$nuxt helped me get around this problem

[Lanayx]

@stephenjason89 this.$nuxt is unavailable in latest pinia :( https://github.com/vuejs/pinia/discussions/1526

[antlionguard]

@stephenjason89 this.$nuxt is unavailable in latest pinia :( vuejs/pinia#1526

It's available now but not have a type support.

[stephenjason89]

@stephenjason89 this.$nuxt is unavailable in latest pinia :( vuejs/pinia#1526

Use @ts-ignore because there's no type support.

[Lanayx]

@antlionguard can you please give more information - where it is availabe? I'm using "@pinia/nuxt": "^0.4.0", "nuxt": "3.0.0-rc.8", "pinia": "^2.0.18" And this.$nuxt is undefined inside store action on server side

[Lanayx]

Ah, I see, it was removed from Nuxt3, so Nuxt2 users are more lucky here

[stephenjason89]

Let's hope it gets fixed soon 😅 @Lanayx I'm using nuxt bridge

[Lanayx]

As far as I can understand Nuxt3 developers motivation - they want us to pass nuxtApp explicitly into actions parameters, rather than implicitly receiving it from this

[stephenjason89]

@Lanayx That's correct. I hope it gets fixed soon

[LudoFont]

up please, is there any hope for this bug to be fixed ? (nuxt3 + pinia). This bug happen to me when I call async methods in pinia actions during SSR.

[tubstrr]

I struggled with this for a while, the solution for me was to instantiate the store before I called a method inside of it.

In my use case, I was trying to build Bread Crumbs aided by the current Route, my code looked like this:

export const useBreadCrumbStore = defineStore("breadcrumbs", () => {

  const { currentRoute } = useRouter();

  const makeBreadcrumbList = () => {
    const fullPath = currentRoute.value.fullPath;
    
    fullPath.split("/").forEach((path, index) => {
     ...
    }
  }
}

Which would error out with the Nuxt Instance Unavailable.

What I ended up having to do, was to call the store on my page, before my useSEO composable which actually calls the "makeBreadcumbList" function.

I found this doc on Pinia's site which clarified what was happening in my case.
https://pinia.vuejs.org/core-concepts/outside-component-usage.html

Hope this helps.

[VladStepanov]

Up. Nuxt 3 + Pinia same error. But it happens not always. I can't explain how, but if i call more than 3 stores from server plugin, then in last store error happens.

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v2-bridge 👉 https://codesandbox.io/p/github/nuxt/starter/v2-bridge-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions[bot]]

This issue was closed because it was open for 7 days without a reproduction.