getActivePinia was called with no active Pinia. Did you forget to install pinia?

[martinszeltins]

Reproduction

https://stackblitz.com/edit/vitejs-vite-bmg8rr?file=src/forms/loginForm.js

Steps to reproduce the bug

If you open the reproduction project on Stackblitz and then open the Console you will see this error:

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
	const pinia = createPinia()
	app.use(pinia)
This will fail in production.
    at useStore (pinia.js:1402:13)
    at useAuth (useAuth.js:4:22)
    at loginForm.js:4:19

Expected behavior

The expected behavior is that there should not be an error.

Actual behavior

The error is shown.

Additional information

So I found this from Eduardo @posva where he described the problem in a different issue but it does not help with solving the issue. It is not clear how to fix this, what should I do instead?

This error means you are trying to create a store (via useSomeStore()) before app.use(pinia) is called. This can happen because you are calling useSettingsStoer() outside of the component setup at the root of a vue file. You need to use the store inside of setup() or use mapStores

The only workaround I could come up with was to wrap the call to my service (which uses a call to useAppStore) in a setTimeout - but this is not a good solution.

import { useAuth } from '../services/useAuth'

setTimeout(() => {
  const { login } = useAuth()
}, 2000)

Now it works but ... 🤦🏻‍♂️ There has to be a better solution for this.

[posva]

You have three options:

• Call the useAuthStore() function after app.use(pinia) (https://pinia.vuejs.org/core-concepts/outside-component-usage.html#single-page-applications)
• Pass the pinia instance to useAuthStore(pinia). pinia being the one created with const pinia = createPinia()
• Call setActivePinia(pinia) somewhere before useAuthStore() (https://pinia.vuejs.org/ssr/#using-the-store-outside-of-setup)

[posva]

I updated the reply. These are not hacks, I wouldn't have pointed them out otherwise 😄 . It's not a shortcoming, it's necessary in order to make stores automatically dynamic.

The error you have could be a cyclic import

[Linhongbin-1111]

You have three options:

• Call the useAuthStore() function after app.use(pinia) (https://pinia.vuejs.org/core-concepts/outside-component-usage.html#single-page-applications)
• Pass the pinia instance to useAuthStore(pinia). pinia being the one created with const pinia = createPinia()
• Call setActivePinia(pinia) somewhere before useAuthStore()

I tried the above three ways, none of them solved the problem.

[martinszeltins]

@Linhongbin-1111 can you please share your code? I was able to get it to work by passing a pinia instance to my useXStore() call like this:

./src/forms/searchForm.ts:

import pinia from '@/stores'
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '@/stores/settingsStore'

const settingsStore = useSettingsStore(pinia()) // <-- this pinia() call returns a pinia instance singleton
const { username } = storeToRefs(settingsStore)

// ...

This is what my @/stores/index.ts looks like:

import { createPinia, Pinia } from 'pinia'

let piniaInstance: Pinia|null = null

const pinia = (): Pinia => {
    if (piniaInstance !== null) return piniaInstance

    piniaInstance = createPinia()

    return piniaInstance
}

export default pinia

I don't know if this is the best practice but it works. Perhaps @posva can tell me if this is a good / recommended practice or not.

[Linhongbin-1111]

Hey guys,thanks for your reply.
I found my problem.
In router.js I import a hook file that uses useStore(), which caused this problem.

Thanks again!

[posva]

@martinszeltins That code seems good (at least for client side only)! For SSR apps you must ensure each app is using their own pinia instance.
I'm glad you found your way by passing the pinia instance!

[piroozjenabi]

Hi, everyone after a lot of research I found the answer to this issue,
you must pass index.ts/js for const like below:

`<script lang="ts" setup>
import store from '../stores/index';
import { useCounterStore } from '../stores/counter';

const counterStore = useCounterStore(store());
counterStore.increment();
console.log(counterStore.count);
</script>
`

[Linhongbin-1111]

你好，我是林鸿斌。我已收到你的来信，谢谢你~保持开心~ 不用回复！

[LasanthaKathriarachchi]

Hi Guys,

I created a tableau extension, in which I want to render a map component using pinia.
Coding done using Vue + TS + JS.

This is how I try to load the app with map in the main.js file.

main.js

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import "./styles/general.scss";
import directives from "./directives";

const app = createApp(App);
directives(app);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');

===
I'm getting this error.

getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.

When the map-store as a ts file, it works. I tried it that way in a powerbi custom visual. There it didn't gave this error.
But when the same code used in a Tableau Extension, it needed to compile all the ts files into js files.
Then it doesn't work and gave this error.

Anybody knows how to solve the error, when the map-store used as a js file?
Please let me know, any thing more require to render the pinia map inside a tableau extension.

Thanks in advance,
Lasantha

[Linhongbin-1111]

你好，我是林鸿斌。我已收到你的来信，谢谢你~保持开心~ 不用回复！

[martinszeltins]

Piedod, bet šis izskatās pēc spama.

[ZWkang]

@posva

import pinia from '@/stores'
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '@/stores/settingsStore'

const settingsStore = useSettingsStore(pinia()) // <-- this pinia() call returns a pinia instance singleton
const testValue = computed(() => settingsStore.xxx['test'])

if using this way, looks like computed will not execute when store value change

[Linhongbin-1111]

你好，我是林鸿斌。我已收到你的来信，谢谢你~保持开心~ 不用回复！