Just starting out with Vue 3 & TypeScript and diving into PrimeVue. Currently, I'm working on a simple todo app to get the hang of things. However, I've hit a roadblock with an error message that reads:
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)
Trying to decipher this error has been challenging. I've struggled to find the root cause within the code specifically related to the config term mentioned in the error message. Here's a snippet of the code that might provide some context:
<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>