Undefined property '$primevue' accessed during rendering

Question

Cases and Questions

I am working on a private project using Vue.js and I encountered the following error when I tried to use FileUploadPrimeVue code>Occurs when component:

[Vue warn]: Property '$primevue' was accessed during rendering, but the property is undefined on the instance. 

Trying to use FileUpload in my component:

<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>

The error only occurs when I try to use FileUpload, if I remove it the component works fine. FileUpload and PrimeVue are both imported in main.js as they should:

<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>

What I tried

I searched for this issue, but the only exact match for this error was an old closed issue on GitHub for the Calendar component: Issue #808.This issue is caused by breaking changes in the new PrimeVue API. This shouldn't be my case since it was introduced in V3.1 and I'm using V3.7.

If the version is the problem, I tested different versions of PrimeVue, such as 3.1, 3.2, 3.3, but the error still exists. Therefore, the actual dependencies are still up to date:

"primevue": "^3.7.0"

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 Vue.js to understand the problem.

Thanks in advance!

Answer 1

You are using app.use() incorrectly:

app.use(
    router,
    PrimeVue,
    PrimeIcons,
    store
)

app.use() Only accepts two parameters:

• First parameter: Vue plug-in
• Second parameter: Plug-in options

Also, PrimeIcons is not a plugin, so it should not be passed to app.use().

solution

Pass each plugin individually to app.use():

app.use(router)
   .use(PrimeVue)
   //.use(PrimeIcons)   // 不是一个插件
   .use(store)