Vue3引入vue-flash-message报错：Uncaught TypeError: t is not a constructor

问题原因 #

你当前安装的@smartweb/vue-flash-message版本大概率是适配Vue2的，而你的项目采用Vue3的createApp初始化方式，两者不兼容导致构造函数类型错误。

解决方案 #

1. 安装适配Vue3的插件版本 #

卸载当前版本，安装专门针对Vue3的分支版本：

npm uninstall @smartweb/vue-flash-message
npm install @smartweb/vue-flash-message@next

2. 修正main.js中的导入和使用方式 #

Vue3版本的插件导入方式有变化，调整代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import { createFlashMessage } from '@smartweb/vue-flash-message';
import router from './router'
import store from './store'

const app = createApp(App);
// 使用createFlashMessage创建实例并挂载
app.use(createFlashMessage());
app.use(store)
app.use(router)
app.mount('#app')

3. 验证生效 #

启动项目后，若不再抛出构造函数错误，即可按照插件文档在组件中使用，示例：

// 在组件内调用消息提示
this.$flashMessage.show('测试消息', 'success');

内容的提问来源于stack exchange，提问作者dann