vue.js:5076 [Vue warn]: injection "Symbol(pinia)" not found.

[youcanping]

Reproduction

Reproduction

Steps to reproduce the bug

• vue@2.7.x
• pinia@2.0.20

console warn log: vue.js:5076 [Vue warn]: injection "Symbol(pinia)" not found.

Expected behavior

no waring

Actual behavior

warning

Additional information

after vue2.7

[kingyue737]

What's the version of your vue 2.7? This issue should be fixed in vue > 2.7.6 vuejs/vue#12636

[youcanping]

ok

[youcanping]

I use vue@2.7.10

[CreativeWarlock]

I've got the same error in my browser console:
[Vue warn]: injection "Symbol(pinia)" not found.
at <App contentItemId="633ac135f594fe572990ecf2" ...

The following snippet in my PageManager class (in my Vue 3.2.13 project with Pinia in Version 2.0.22) triggers the warning:

class PageManager {
	addEditorsToPage(route, targetContainer) {
		let pageLabel = getPageLabel(route)

		if (this.isCmsPage(pageLabel)) {
			let pageId = this.getPageId(pageLabel)
			//console.log('loaded page ID:', pageId)

			let contentItemIds = this.getContentItemIDs('body', pageId)
			//console.log('loaded contentItemIds:', contentItemIds)

			for (let contentItemId of contentItemIds) {
				//console.log('loading contentItem with contentItemId: ', this.contentItemId)
				ContentService.getContentItem(contentItemId).then((contentItem) => {
					//console.log('loaded contentItem: ', contentItem)
					this.addHtmlEditor(contentItem, targetContainer) // TODO: Differentiate between HTML editors and others.
				})
			}
		}
	}
	addHtmlEditor(contentItem, targetContainer) {
                // =========================================================================
                // =========================================================================

		const htmlEditorInstance = createApp(  // <================ THIS triggers the "injection "Symbol(pinia)" not found warning!!"
			{
				extends: TheHtmlEditor
			},
			{ contentItemId: contentItem.id, content: contentItem.content[0] }
		).mount(document.createElement('div')) // could pass '#cms-container' directly, but then we cannot add more instances

                // =========================================================================
                // =========================================================================

		targetContainer.appendChild(htmlEditorInstance.$el)
	}
	getPageId(pageLabel) {
		const pages = usePageStore().getPages
		for (const page of pages) {
			if (page.label === pageLabel) {
				return page.id
			}
		}
		return null
	}
	getContentItemIDs(pagePart, pageId) {
		const pages = usePageStore().getPages
		for (const page of pages) {
			if (pagePart === 'header' && page.id === pageId) {
				return page.content.header
			} else if (pagePart === 'body' && page.id === pageId) {
				return page.content.body
			} else if (pagePart === 'footer' && page.id === pageId) {
				return page.content.footer
			}
		}
		return null
	}

	isCmsPage(pageLabel) {
		//let kebabizedRoute = kebabize(route.substring(route.lastIndexOf('/') + 1))
		//console.log('kebabizedRoute:', kebabizedRoute)
		if (pageLabel.length > 1 && usePageStore().getPageLabels.includes(pageLabel)) {
			console.log('Found CMS managed page:', pageLabel)
			return true
		}

		return false
	}
}
export default new PageManager()

Note, that in this PageManager I only use a page-store whereas in the following 'TheHtmlEditor' I make use of a 'user-store':

TheHtmlEditor:

<script>
import '@ckeditor/ckeditor5-vue/dist/ckeditor.js'
import CKEditor from '@ckeditor/ckeditor5-vue'
// ...
import ContentService from '@/services/content.service'
import { useUserStore } from '@/stores/user-store.js'

export default {
	name: 'TheHtmlEditor',
	components: {
		ckeditor: CKEditor.component
	},
	props: {
		contentItemId: String,
		content: String
	},
	data() { ... },
	created() {
		if (useUserStore().isUserAdmin || useUserStore().isUserEditor) {
			this.interval = setInterval(this.incrementTime, 3000)
		}
	},
	// ...
}
</script>

App.vue:

<template>
	<router-view></router-view>
</template>

<script>
import { useUserStore } from '@/stores/user-store.js'
import { usePageStore } from '@/stores/page-store.js'

export default {
	name: 'App',

	computed: {},
	created() {
		useUserStore().doAutoSignIn()
		usePageStore().loadAllPages()
	}
}
</script>

main.js:

import { createPinia } from 'pinia'
import { createApp, markRaw } from 'vue'

import App from './App.vue'
import router from '@/router/router.js'
import CKEditor from '@ckeditor/ckeditor5-vue'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

const app = createApp(App)
const pinia = createPinia()
pinia.use(({ store }) => {
	store.$router = markRaw(router)
})
app.use(pinia)
app.use(router)
app.use(CKEditor)
app.mount('#app')

It is unclear to me what is triggering the warning and how to avoid it as it produces lengthy outputs in the console.

[CreativeWarlock]

Ok, the error is on my side. I needed to add a prop "useUserStore" of type Object to my TheHtmlEditor component and then pass along my useUserStore to the created html editor, e.g. like this:

addHtmlEditor(contentItem, targetContainer) {
		const htmlEditorInstance = createApp(
			{
				extends: TheHtmlEditor
			},
			{ useUserStore: toRefs(useUserStore()), contentItemId: contentItem.id, content: contentItem.content[0] }
		)
			.mount(document.createElement('div'))

		targetContainer.appendChild(htmlEditorInstance.$el)
	}

The warning is no longer showing up and the component has a responsive Pinia store.