uni-app vue3 app-vue端使用ts时 uni-data-checkbox组件提示Failed to resolve component

项目属性	详细信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win11
HBuilderX类型	Alpha
HBuilderX版本号	3.2.6
手机系统	Android
手机系统版本号	Android 7.0
手机厂商	模拟器
手机机型	蓝叠
页面类型	vue
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<view class="filter-box">  
    <view class="filter-type-box" v-for="(item,index) in filterInfos">  
        <scroll-view :scroll-x="true" style="white-space: nowrap;">  
            <uni-data-checkbox mode="tag" selectedColor="#ecf5ff" selectedTextColor="#2a8dff" v-model="item.val" :localdata="item.list"></uni-data-checkbox>  
        </scroll-view>  
    </view>  
</view>  

<script lang="ts" setup>  
import { ref,reactive } from 'vue'  

let searchValue = ref("");  //搜索  
//。。。省略无用代码  
</script>

操作步骤：

如上，会导致uni的checkbox组件无法显示

预期结果：

预期结果：正常显示
需要手动引入组件才可以

<script lang="ts" setup>  
import uniDataCheckbox from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue"  
import { ref,reactive } from 'vue'  

let searchValue = ref("");  //搜索  
//。。。省略无用代码  
</script>

实际结果：

未正常显示

bug描述：

uni-data-checkbox组件是uni_modules版本的。

vue3 app-vue端使用ts的情况下，使用uni-data-checkbox组件会提示Failed to resolve component。

如果不使用ts，则不会出现该问题。
或者手动引入组件 import uniDataCheckbox from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue"

更多关于uni-app vue3 app-vue端使用ts时 uni-data-checkbox组件提示Failed to resolve component的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

更多关于uni-app vue3 app-vue端使用ts时 uni-data-checkbox组件提示Failed to resolve component的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app Vue3 的 TypeScript 环境中，uni-data-checkbox 组件出现 Failed to resolve component 错误，是由于 Vue3 的编译机制与组件自动注册的兼容性问题导致的。

问题原因： Vue3 的 <script setup> 语法结合 TypeScript 时，部分 uni-app 组件（特别是 uni_modules 中的组件）的自动注册机制可能无法正常工作。这是因为 Vue3 的编译时优化和 TypeScript 的类型检查影响了组件的解析过程。

解决方案：

手动引入组件（如你所述）是最直接的解决方法：

import uniDataCheckbox from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue"

在模板中注册组件：

<template>
  <uni-data-checkbox v-bind="$attrs" />
</template>

<script lang="ts" setup>
import uniDataCheckbox from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue"
</script>