Vue3: injection "Symbol(pinia)" not found

Question

I am using Vue 3 + Vite plugin for Quasar + Pinia for Store management. I followed all official documentation (Quasar, Pinia). But I am getting this error.

    [Vue warn]: injection "Symbol(pinia)" not found. 
    ...
    runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function 
      at <ViewLogin onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
...
    runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
      
    pinia.esm-browser.js:1638 Uncaught (in promise) 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.esm-browser.js:1638:19)
       
    js:185:25)

main.js

import {createApp} from 'vue'
import {Notify, Quasar} from 'quasar'


// Import icon libraries
import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
import '@quasar/extras/material-icons-round/material-icons-round.css'

// A few examples for animations from Animate.css:
// import @quasar/extras/animate/fadeIn.css
// import @quasar/extras/animate/fadeOut.css
// Import Quasar css
import 'quasar/src/css/index.sass'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-sharp/material-icons-sharp.css'

// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'
import router from "./router/router";
import i18n from "./i18n/i18n"
import {createPinia} from "pinia/dist/pinia";
import {useLoginStore} from "./stores/login";

const app = createApp(App)

// app.config.globalProperties.loginStore = useLoginStore();
app.use(Quasar, {
    plugins: {
        Notify,
    }, // import Quasar plugins and add here
})
app.use(router)

app.use(i18n)
app.use(createPinia())
// Assumes you have a <div id="app"></div> in your router.html
app.mount('#app')

And I am recieving this error after adding 'const store = useLoginStore()' to the component's code.

<script setup>
import {ref} from 'vue'
import {storeToRefs} from 'pinia'
import {useLoginStore} from '../../stores/login'
import {useQuasar} from 'quasar'

const $q = useQuasar()

const email = ref(null)
const password = ref(null)

const store = useLoginStore()
const {loginEmail} = storeToRefs(store)


</script>

What is the problem and how to fix it?

Answer 1

The problem was related to WebStorm. It automatically creates this import:

import {createPinia} from "pinia/dist/pinia";

instead of this

import {createPinia} from 'pinia'

Answer 2

For me it was: import { isTemplateNode } from '@vue/compiler-core'

Cut and reload the server works fine