Vue.js Pinia not installed?

Question

I am constantly getting this error message:

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?b318:1692:1)
    at eval (App.vue?91a0:77:1)
    at ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js (app.js:19:1)
    at __webpack_require__ (app.js:386:33)
    at fn (app.js:642:21)
    at eval (App.vue?vue&type=script&lang=js:5:206)
    at ./src/App.vue?vue&type=script&lang=js (app.js:195:1)
    at __webpack_require__ (app.js:386:33)
    at fn (app.js:642:21)
    at eval (App.vue:3:90)

This is my store.js file

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => {
    return {
      user: null,
    };
  },
  actions: {
    setUser(username) {
      this.user = username;
    },
  },
});

In main.js I have

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";

const pinia = createPinia();
createApp(App).use(router).use(pinia).mount("#app");

and this is the App.vue file

import { auth } from "@/firebase";
import { onAuthStateChanged } from "@firebase/auth";
import { useUserStore } from "@/stores/store";

const store = useUserStore();

export default {
  // setup() {
  //   const store = useUserStore();

  //   return {
  //     // you can return the whole store instance to use it in the template
  //     store,
  //   };
  // },
  name: "app",
  data() {
    return {
      store,
    };
  },
  methods: {
    signOut() {
      auth.signOut().then(() => {
        this.$router.push({ name: "login" });
      });
    },
  },
};
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log(user.email);
    store.setUser(user.email);
  } else {
    console.log("no user");
    store.setUser(null);
  }
});

It worked and then Imported Bootstrap, then I got the error msg in the beginning.

I removed the bootstrap and it still doesn't work.

Any ideas?

Pinia is installed via npm.

Answer 1

You are calling pinia outside of your component setup

This is not correct

const store = useUserStore();

export default {
  // setup() {
  //   const store = useUserStore();

  //   return {
  //     // you can return the whole store instance to use it in the template
  //     store,
  //   };
  // },

useUserStore should be inside your setup method.

correct

export default {
   setup() {
     const store = useUserStore();
},