PrimeVue Button无法渲染且报Object不是函数错误如何解决？

报错指向说明 #

你遇到的TypeError: Object(...) is not a function错误，指向的是PrimeVue Button组件内部调用的Vue3专属API对象，这些API在Vue2环境下不存在或者形态不匹配，无法作为函数调用，因此抛出异常。

具体错误原因 #

1. PrimeVue版本与Vue版本不兼容 #

PrimeVue 3.x及更高版本仅支持Vue3，内部依赖Vue3的Composition API、新版渲染函数等专属能力，不能在Vue2项目中运行。如果你在Vue2项目中安装了高版本PrimeVue，就会触发该渲染错误。

2. main.js注册逻辑写法错误 #

Vue2中use方法是挂载在全局Vue构造函数上的，不是Vue实例的方法，你调用app.use(PrimeVue)会额外抛出app.use is not a function错误。同时插件、全局组件的注册需要在实例挂载之前完成，先执行$mount再注册不会生效。

修复方案 #

1. 卸载当前高版本PrimeVue，安装适配Vue2的2.x版本：

npm uninstall primevue
npm install primevue@2.x

2. 修正main.js的注册逻辑：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import PrimeVue from "primevue/config";
import Button from 'primevue/button'

import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'

// 全局注册插件和组件，放在实例挂载前执行
Vue.use(PrimeVue)
Vue.component('Button', Button)

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 修正NewCompany.vue中Button的用法，label属性已经可以设置按钮文本，不需要额外写插槽内容：

<template>
  <div>
      <Button label="New" />
      test
  </div>
</template>

内容的提问来源于stack exchange，提问作者Darius.V