getActivePinia was called with no active Pinia. Vue

i get 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.mjs:1691:19)
at PokemonDetails.vue:3:22

what's wrong with my code?

pokemonDetails:

<script>
import { usePokemonStore } from '../stores/PokemonStore';
const pokemonStore = usePokemonStore();
export default {
name: 'PokemonDetails',
methods: {
evolutions() {
return [
pokemonStore.evolutionOne,
pokemonStore.evolutionTwo,
pokemonStore.evolutionThree,
];
},
resetApp() {
this.$router.push('/');
pokemonStore.$reset();
},
},
};
</script>
<template>
<template v-if="pokemonStore.findPokemon == false">
<div class="firstDiv">
<div class="secondDiv">
<div>
<strong>{{ pokemonStore.pokemonName }}</strong
><img :src="pokemonStore.selfie" alt="foto de pokemon" />
<p>Elemento Principal: {{ pokemonStore.type }}</p>
</div>
<div>
<strong>Habilidades:</strong>
<ul>
<li v-for="stat in pokemonStore.stats[0]">
{{ stat.stat.name }}: +{{ stat.base_stat }}
</li>
</ul>
</div>
</div>
<div class="divEvolutions">
<strong>Evolução</strong>
<ul class="evolutions">
<li v-for="evolution in evolutions">
<img :src="evolution.selfie" />
{{ evolution.name }}
</li>
</ul>
</div>
<button v-on:click="resetApp" class="newSearch">Nova pesquisa</button>
</div>
</template>
</template>
<style lang="scss" scoped>
.firstDiv {
text-align: center;
}
.secondDiv {
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: repeat(2, 1fr);
max-height: 600px;
width: 400px;
padding: 20px;
border-radius: 1.5rem;
background-color: $gray-200;
div {
display: flex;
flex-direction: column;
}
}
.divEvolutions {
background-color: $gray-200;
border-radius: 1.5rem;
margin-top: 10px;
}
.evolutions {
display: flex;
justify-content: center;
align-items: center;
li {
display: flex;
flex-direction: column;
}
}
.newSearch {
margin-top: 10px;
padding: 5px;
border-radius: 1rem;
background-color: $gray-200;
transition-duration: 500ms;
&:hover {
background-color: black;
color: $gray-200;
}
}
</style>

pokemonStore.js:

import { defineStore } from 'pinia';
export const usePokemonStore = defineStore('pokemon', {
state: () => ({
findPokemon: true,
pokemonName: '',
speciesLink: '',
selfie: '',
type: '',
stats: [],
evolutionOne: {},
evolutionTwo: {},
evolutionThree: {},
}),
getters: {},
actions: {
addPokemon(
name,
species,
selfie,
type,
stats,
evolutionOne,
evolutionTwo,
evolutionThree
) {
this.pokemonName = name;
this.speciesLink = species;
this.selfie = selfie;
this.type = type;
this.stats.push(stats);
this.findPokemon = false;
this.evolutionOne = evolutionOne;
this.evolutionTwo = evolutionTwo;
this.evolutionThree = evolutionThree;
},
},
});

main.js:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import './assets/main.css';
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount('#app');

i tried call my store in computed:

  computed: {
pokemonStore() {
return usePokemonStore();
},
evolutions() {
return [
this.pokemonStore.evolutionOne,
this.pokemonStore.evolutionTwo,
this.pokemonStore.evolutionThree,
];
},
},

it works, but i believe is don't the best practices

Stores aren't supposed to be used before Pinia is installed to Vue application.

The reason why use... composables are created by Pinia defineStore instead of store objects is that this allows to avoid race conditions.

Here usePokemonStore is called on pokemonDetails import before Pinia install. pokemonStore is referred in the template while it's not a part of component instance. For a component with options API it should be:

  name: 'PokemonDetails',
data() {
return { pokemonStore: usePokemonStore() }
},

I went through this in a recent episode and this happens when you try to access the pinia without having created it before.

I defined a file called global.ts that contains the instructions below

import { createPinia } from 'pinia'
export const piniaInstance = createPinia()

Then in my user store.ts file I imported the pinia instance already created globally and included it in the store, thus directly exporting the store to any location requested.

import { UsuarioData } from "@/recursos/classes/Usuario";
import { defineStore } from "pinia";
import { piniaInstance } from '@/recursos/global'
import { userStorageKey } from '@/recursos/constantes'
const usuarioStore = defineStore('usuario', {
state() {
return {
dadosUsuario: new UsuarioData()
}
},
actions: {
deslogar() {
localStorage.removeItem(userStorageKey)
this.dadosUsuario = new UsuarioData()
console.log('usuario após deslogar', this.dadosUsuario)
},
logar(dadosUsuario: UsuarioData) {
localStorage.setItem(userStorageKey, dadosUsuario.Token)
this.dadosUsuario = dadosUsuario
}
},
getters: {
obterUsuario() : UsuarioData {
return this.dadosUsuario
},
obterTokenAcesso() : string {
return this.dadosUsuario.Token
}
}
})(piniaInstance); // pinia instance
export default usuarioStore

this worked for me. Even if I have several stores, I can call the pinia instance within the stores and pass it as a parameter

remember to import the pinia instance into your main.ts/js file as well

import '@/assets/styles/app.css'
import { createApp } from 'vue'
import { piniaInstance } from '@/recursos/global'
import App from './App.vue'
import router from './recursos/router'
const app = createApp(App)
app.use(router).use(piniaInstance)
app.mount('#app')

Check you aren't mixing options and composition API components up and copy/pasting without thinking. Using pinia on an old options API component is different.

In project terminal:

1. npm uninstall -g @pinia
2. npm list -g @pinia

you will get this error
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@pinia" of package "@pinia": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/spark/.npm/_logs/2023-07-15T07_29_36_570Z-debug-0.log

3. npm uninstall @pinia
4. npm cache clean --force
5. rm -rf node_modules
6. npm install @pinia

this will fix

if you get this error
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "@pinia" of package "@pinia": Tags may not have any characters that encodeURIComponent encodes.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/spark/.npm/_logs/2023-07-15T07_30_56_791Z-debug-0.log

add this again
rm -rf node_modules,
npm cache clean --force,
npm install

this will change the project pinia version if you are collabing change it with what is best to not get into other issue when hosting.

You should be add <script> tag.
Composition API is essential <script setup>