Undefined property '$primevue' accessed during rendering
P粉476547076
2023-08-25 16:17:16
<p><strong>Cases and Questions</strong></p>
<p>I am working on a private project using <code>Vue.js</code> and I encountered the following error when I tried to use <code>FileUpload</ of <code>PrimeVue</code> code>Occurs when component: </p>
<pre class="brush:php;toolbar:false;">[Vue warn]: Property '$primevue' was accessed during rendering, but the property is undefined on the instance. </pre>
<p>Trying to use <code>FileUpload</code> in my component: </p>
<pre class="lang-html prettyprint-override"><code><template>
<FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files here to upload. </p>
</template>
</FileUpload>
</template>
</code></pre>
<p>The error only occurs when I try to use <code>FileUpload</code>, if I remove it the component works fine. <code>FileUpload</code> and <code>PrimeVue</code> are both imported in <code>main.js</code> as they should: </p>
<pre class="lang-js prettyprint-override"><code>import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";
const app = createApp(App);
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'
import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";
app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)
app.mount('#app')
</code></pre>
<p><strong>What I tried</strong></p>
<p>I searched for this issue, but the only exact match for this error was an old closed issue on GitHub for the <code>Calendar</code> component: Issue #808.This issue is caused by breaking changes in the new <code>PrimeVue API</code>. This shouldn't be my case since it was introduced in V3.1 and I'm using V3.7. </p>
<p>If the version is the problem, I tested different versions of <code>PrimeVue</code>, such as 3.1, 3.2, 3.3, but the error still exists. Therefore, the actual dependencies are still up to date: </p>
<pre class="brush:php;toolbar:false;">"primevue": "^3.7.0"</pre>
<p>Maybe a solution already exists on SO or Google, but either my English is too poor to understand, or I'm not familiar enough with <code>Vue.js</code> to understand the problem. </p>
<p>Thanks in advance! </p>
You are using
app.use()
incorrectly:app.use()
Only accepts two parameters:Also,
PrimeIcons
is not a plugin, so it should not be passed toapp.use()
.solution
Pass each plugin individually to
app.use()
: