[Nuxt 3] Nuxt instance unavailable in pinia store during SSR

[LudoFont]

Reproduction

/

Steps to reproduce the bug

When I run some async actions during SSR (asyncData, plugins ...) and I try to use some hooks from Nuxt (useNuxtApp, useRuntimeConfig, useCookie ...), it crashs with the error "nuxt instance unavailable", only after an await code line.

  actions: {
    async foo() {
      const a = useNuxtApp(); // <= this works fine
      await this.bar(); // <= some async method 
      const b = useNuxtApp(); // <= this crash, nuxt instance unavailable
    },

and for exemple, a plugin, only server side :
plugins/myPlugin.server.js

export default defineNuxtPlugin(async ({ $pinia }) => {
  const myStore = useMyStore($pinia);
  await myStore.foo();
})

Expected behavior

The nuxt hooks should be available, even after an await method call

Actual behavior

[nuxt] [request error] [unhandled] [500] nuxt instance unavailable                                                                                           15:27:38
  at useNuxtApp (./node_modules/nuxt/dist/app/nuxt.mjs:165:13)  
  at Module.useRuntimeConfig (./node_modules/nuxt/dist/app/nuxt.mjs:173:10)  
  at Proxy.test (./store/magasin.js:53:39)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async ./plugins/2.serverInit.server.js:29:86  
  at async Object.callAsync (./node_modules/unctx/dist/index.mjs:53:16)  
  at async applyPlugin (./node_modules/nuxt/dist/app/nuxt.mjs:97:23)  
  at async Module.applyPlugins (./node_modules/nuxt/dist/app/nuxt.mjs:107:5)  
  at async createNuxtAppServer (./node_modules/nuxt/dist/app/entry.mjs:29:7)  
  at async default (./node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:18)

Additional information

No response

[VladStepanov]

I've found a workaround for this.

This causes exception

export const useStore = defineStore('', {
  actions: {
    foo () {
      useNuxtApp()
    },
  },
})

But with pinia store in composion-api style

export const useStore = defineStore('', () => {
  const nuxtApp = useNuxtApp()

  return {
    foo () {},
  }
})

[zestlee1106]

This will also result in an error. :(....
Is there any other solution?

[VladStepanov]

Are you calling useNuxtApp() on top level, not in methods?
You can send code here.

[ishaiavrahami]

Same here, any solution? @LudoFont @VladStepanov

I'm trying this inside a composable SSR and its returning the 'nuxt instance unavailable'

export default function useFetchGet(url, data, options = {}) {
  const nuxtApp = useNuxtApp();

  const { TOKEN, UID, CLIENT_ID } = useUserStore();

  var defaultData = { uid: UID, gtp_token: TOKEN, client_id: CLIENT_ID };

  var params = queryString.stringify({ ...data, ...defaultData }, { arrayFormat: "bracket" });

 
  var get_url = `${nuxtApp.$WEBSITE_LINK}/cpi/${url}?${params}`;

  return useFetch(get_url, options);
}

[LudoFont]

My way to do :
create a plugin where you send to pinia the things you need from the nuxtApp, the config, the composables like useRequestEvent, useRoute, for exemple :
in /plugins/pinia-init.js

export default defineNuxtPlugin(({ $pinia, $thingsFromNuxtApp }) => {
  let $req = null;
  let $res = null;
  let $config = null;
  if (process.server) {
    $req = useRequestEvent().node.req;
    $res = useRequestEvent().node.res;
    $config = useRuntimeConfig();
  } else {
    $config = {
      public: useRuntimeConfig().public
    };
  }
  $pinia.use(() => ({ $config, $ssrReq: $req, $ssrRes: $res, $thingsFromNuxtApp }));
})

and in your store, you can use it like that :

import { defineStore } from "pinia";

export const useMyStore = defineStore({
  id: 'myStore',
  state: () => {
    return {
      a: null
    }
  },
  actions: {
    setConfigKeyInA() {
      this.a = this.$config.public.MyConfigKey;
      console.log(this.$ssrReq);
      console.log(this.$thingsFromNuxtApp);
    )
  },
});

I hope it can help !