Undefined property '$primevue' accessed during rendering
P粉476547076
P粉476547076 2023-08-25 16:17:16
0
1
690
<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>
P粉476547076
P粉476547076

reply all(1)
P粉611456309

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)
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template