在Quasar项目中配置Vue3的compilerOptions.isCustomElement解决组件报错

1. 确认依赖安装与导入正确性 #

• 先确保已正确安装依赖：

  npm install vue3-emoji-picker
  # 或使用yarn
  yarn add vue3-emoji-picker
  # 或pnpm
  pnpm add vue3-emoji-picker
  

• 在WhatsappTextMessageEditor组件中，检查导入语句是否正确：

  <script setup>
  import { EmojiPicker } from 'vue3-emoji-picker'
  // 必须导入组件样式
  import 'vue3-emoji-picker/css'
  </script>
  

  若使用的是旧版本组件，可能需要默认导入：

  <script setup>
  import EmojiPicker from 'vue3-emoji-picker'
  import 'vue3-emoji-picker/css'
  </script>
  

2. 局部注册组件（推荐） #

如果使用选项式API开发组件，需手动注册导入的组件：

<script>
import { EmojiPicker } from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'

export default {
  components: {
    EmojiPicker
  }
}
</script>

<script setup>语法下，导入后可直接使用，无需额外注册。

3. 全局注册组件（多组件复用场景） #

若多个组件需要使用EmojiPicker，可通过Quasar的boot机制全局注册：

1. 在src/boot目录新建emoji-picker.js：

   import { EmojiPicker } from 'vue3-emoji-picker'
   import 'vue3-emoji-picker/css'
   
   export default ({ app }) => {
     app.component('EmojiPicker', EmojiPicker)
   }
   

2. 在quasar.conf.js中注册该boot文件：

   module.exports = function (/* ctx */) {
     return {
       // ...其他配置
       boot: [
         // ...已有的boot文件
         'emoji-picker'
       ]
     }
   }
   

4. 修正Vue compilerOptions配置（兜底方案） #

若上述步骤无效，说明Vue误将EmojiPicker识别为原生自定义元素，需在配置中排除：

• 修改quasar.conf.js的build配置：

  module.exports = function (/* ctx */) {
    return {
      // ...其他配置
      build: {
        vueCompilerOptions: {
          isCustomElement: tag => tag === 'EmojiPicker'
        }
      }
    }
  }
  

5. 清理缓存并重启项目 #

缓存可能导致组件解析异常，执行以下操作：

• 删除node_modules/.cache目录
• 重启开发服务器：quasar dev

内容的提问来源于stack exchange，提问作者Busenur Adıbelli