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

stephenjason89 commented 2 years ago

Environment

Operating System: Darwin
Node Version: v18.7.0
Nuxt Version: 2.16.0-27616340.013f051b
Package Manager: yarn@3.2.1
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/vuetify@1.12.3, @nuxt/image@0.7.1, @nuxtjs/axios@5.13.6, @nuxtjs/proxy@2.1.0, nuxt-social-meta@1.0.0
Build Modules: (), nuxt-storm@1.1.3, nuxt-compress@5.0.0, @pinia/nuxt@0.3.1, ~/modules/apolloSSR, @nuxt/bridge@3.0.0-27639120.e7a7f9b

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 commented 2 years ago

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 commented 2 years ago

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

stephenjason89 commented 2 years ago

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

Lanayx commented 2 years ago

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

antlionguard commented 2 years ago

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

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

stephenjason89 commented 2 years ago

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

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

Lanayx commented 2 years ago

@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 commented 2 years ago

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

stephenjason89 commented 2 years ago

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

Lanayx commented 2 years ago

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 commented 2 years ago

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

LudoFont commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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] commented 10 months ago

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](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

github-actions[bot] commented 7 months ago

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

nuxt / bridge