Vue-TypeScript 应用程序类型错误：无法读取未定义的属性（读取“配置”）

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

I think you have to import it like this:

 <script setup lang="ts">
 import Menu from 'primevue/menu/sfc';

https://www.primefaces.org/primevue/setup

Answer 2

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') 👈