Vue-TypeScript Application TypeError: Cannot read properties of undefined (reading 'config')

Question

I am new to Vue 3 & TypeScript and using PrimeVue. I am trying to learn by creating a simple todo app. I run into an error that says

Uncaught TypeError: Cannot read properties of undefined (reading 'config')
at Proxy.containerClass (menu.esm.js:306:50)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
at get value [as value] (reactivity.esm-bundler.js:1144:39)
at Object.get [as containerClass] (runtime-core.esm-bundler.js:3427:30)
at menu.esm.js:346:33
at Proxy.renderFnWithContext (runtime-core.esm-bundler.js:853:21)
at Proxy.<anonymous> (runtime-core.esm-bundler.js:1947:78)
at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5580:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

I'm not sure what it means. I searched through the code for config but still didn't understand what the problem is. Here's a snippet if it's helpful.

 <script setup lang="ts">
 import { ref } from 'vue';
 import Menubar from 'primevue/menubar'
 import Menu from 'primevue/menu';

    const items = ref([
        {  
            items: [{
                label: 'Search',
                icon: 'pi pi-search',
                uri: './LeftNavigation.vue'
            },
            {
                label: 'View Completed',
                icon: 'pi pi-check-square', 
                uri: ''
            },
            {
                label: 'Delete',
                icon: 'pi pi-trash',
                uri: ''
            },
            {
                label: 'View Archived',
                icon: 'pi pi-cloud-upload',
                uri: ''
            },
            {
                label: 'View All',
                icon: 'pi pi-list',
                uri: ''
            },                                                                
        ]},
    ]);
   </script>

   <template>
     <div style="background-color:brown;width:50px">
       <Menu :model="items" />
     </div>
   </template>

   <style lang="scss" scoped>

   </style>

Answer 1

You've mounted the app before installing the PrimeVue plugin:

// main.ts
⋮
const app = createApp(App)
app.mount('#app') 👈
app.use(PrimeVue)
app.use(DialogService)

That leads to the error you encountered when the PrimeVue component attempts to find its config, which is supposed to be setup by the plugin.

Solution

Mount the component as the last initialization step:

// main.ts
⋮
const app = createApp(App)
app.use(PrimeVue)
app.use(DialogService)
app.mount('#app') 👈