Cannot use Pinia stores in Nuxt layers: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

[okainov]

Reproduction

https://github.com/okainov/pinia-nuxt-layers-bug-repro

Summary

I'm observing the issue when stores are defined and working well in the base layer (as well as in .playground), it does NOT work at all with the app extending the layer. The error I'm getting is

[🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production.

Steps to reproduce the bug

0 . piniatest layer was initialized as npx nuxi init -t layer piniatest and one test useTestStore composable was created. Information about it added to HelloWorld component

1. Check cd piniatest && npm i && npm run dev - it starts, opens the page correctly where you can manipulate the store. Works as expected
2. Now go to mainapp folder - simple example reusing the layer. Do the same cd mainapp && npm i && npm run dev. Open the page in browser

When you try to open it, error message appears:

[🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production.

Expected behavior

It should work the same way as in the main layer

Actual behavior

When you try to open it, error message appears:

[🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production.

Additional information

I used composables folder for store just to avoid issues with imports and extra configuration, seems like there are existing issues about it: at least
#3028, #2996

[okainov]

@posva could you please clarify why this is not an issue? Thanks!

[okainov]

While I played around with the reproducer for #3028, I was really surprised that it would work if I fix the imports thingy. So I digged deeper and seems like I found what was causing the issue

Problematic code:

import { defineStore } from 'pinia'

export const useTestStore = defineStore('test', () => {

Working code:

//import { defineStore } from 'pinia'

export const useTestStore = defineStore('test', () => {

Yes, if I remove import defineStore it starts working!

@posva do you really think it's not a bug? Did I miss some documentation saying "do not use imports in layers" or something similar?

[Frederick-88]

having the same issue, mentioned in the main discussion - hope we can get some good news
#3028 (comment)

[okainov]

Yeah there are multiple issues around it, but the good part that it seems there are quite easy workarounds for all of them:

• For not auto-importing - just place stores in "composables" folder and you're good to go.
• For the issues I described here - remove explicit "import" statements as I mentioned. I genuinely think it's a Pinia bug, but for some reason maintainer has closed initial issue without comments and hasn't wrote anything here neither :(