Getting the "no active Pinia" error when using Pinia in external file inside the script setup

[MooseSaeed]

Reproduction

https://github.com/MooseSaeed/pinia-repro/tree/master

Steps to reproduce the bug

1. Create a file in .src/utils/file.ts
2. Inside that file, import any store and assign it to a variable.
3. Export a new function that uses this store.

import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()

export const triggerCounterStore = () => {
  counterStore.increment()

  return 'Count incremented'
}

5. In App.vue, import this function from the file you created and use the function in the script setup.

<script setup lang="ts">
import { triggerCounterStore } from '@/utils/someUtility'

const counterStoreTriggered = triggerCounterStore()
</script>

Expected behavior

According to the docs

If you are not doing any SSR (Server Side Rendering), any call of useStore() after installing the pinia plugin with app.use(pinia) will work

And since the file that is using the the store is used within the script setup, it should work fine.

Actual behavior

This error will show up in the console

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

Additional information

The issue doesn't occur when I:

1. Use that file inside a Vue page component that is rendered via RouterView.
2. Import the file inside a function using dynamic imports:

const triggerStore = async () => {
  const { triggerCounterStore } = await import('@/utils/someUtility')
  triggerCounterStore()
}

[Deckluhm]

Your App.vue is instantiated before you add Pinia to your app, that's why you get this error.

So basically you can't use your stores in the App.vue but it's fine if you use it on any "view" component (every component referenced in your router) or any of their children.

[MooseSaeed]

Your App.vue is instantiated before you add Pinia to your app, that's why you get this error.

So basically you can't use your stores in the App.vue but it's fine if you use it on any "view" component (every component referenced in your router) or any of their children.

The store works perfectly in App.vue, but the issue comes up when it's initialized in an external file and then imported into App.vue. I think what’s happening is that when a Pinia store is set up at the top level of an external file, it gets initialized as soon as the file is imported, which happens early to make sure it’s part of the final bundle. So, the store initialization runs before Pinia is fully ready.

[Deckluhm]

Ah yes indeed you are right, I read your code a bit too fast!

If you modify the file that exports the function to instantiate your store inside the function instead of doing it at the top level, you should be fine:

import { useCounterStore } from '@/stores/counter'

export const triggerCounterStore = () => {
  const counterStore = useCounterStore() // Moved here so it is only call when the function is called, not when the file is imported
  counterStore.increment()

  return 'Count incremented'
}