TypeScript项目在导入组件时报错 Unknown custom element: <v-uni-view> #1400
Description
问题描述
TypeScript项目在导入组件时报错 Unknown custom element:
复现步骤
[复现问题的步骤]
1.创建项目 vue create -p dcloudio/uni-preset-vue my-project
2.选择默认模板(TypeScript)
3.从插件市场随意下载一个插件,例如List 列表,按照说明导入
<template>
<view class="content">
<uni-list>
<uni-list-item title="标题文字" :show-arrow="false"></uni-list-item>
<uni-list-item title="标题文字"></uni-list-item>
<uni-list-item title="标题文字" :show-badge="true" badge-text="12"></uni-list-item>
<uni-list-item title="禁用状态" :disabled="true" :show-badge="true" badge-text="12"></uni-list-item>
</uni-list>
</view>
</template>
<script lang="ts">
import Vue from 'vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
export default Vue.extend({
data() {
return {
title: 'Hello'
};
},
onLoad() {},
methods: {},
components: { uniList, uniListItem }
});
</script>
4.运行到浏览器
Google Chrome[版本 80.0.3987.122]
预期结果
不报错
实际结果
报错
vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
--->
系统信息:
- 发行平台: H5平台
- 操作系统 win10
- HBuilderX版本 2.6.1.20200226
- uni-app版本 [如使用Vue-cli创建/运行项目,则提供
npm run info
的运行结果]
uni-app v2.6.1
uni-app cli v2.0.0-26120200226001
Environment Info:
System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz
Binaries:
Node: 12.14.0 - D:\Program Files\node-v12\node.EXE
Yarn: 1.21.1 - D:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.7 - D:\Program Files\node-v12\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@dcloudio/types: * => 0.4.4
@dcloudio/uni-app-plus: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-app-plus-nvue: 0.0.1
@dcloudio/uni-app-plus-nvue-v8: 0.0.1
@dcloudio/uni-cli-shared: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-h5: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-helper-json: * => 1.0.5
@dcloudio/uni-migration: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-mp-alipay: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-mp-baidu: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-mp-qq: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-mp-toutiao: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-mp-weixin: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-stat: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/uni-template-compiler: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/vue-cli-plugin-uni: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/webpack-uni-mp-loader: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@dcloudio/webpack-uni-nvue-loader: 0.0.1
@dcloudio/webpack-uni-pages-loader: ^2.0.0-26120200226001 => 2.0.0-26120200226001
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.1.2
@vue/babel-preset-app: 3.12.1
@vue/babel-preset-jsx: 1.1.2
@vue/babel-sugar-functional-vue: 1.1.2
@vue/babel-sugar-inject-h: 1.1.2
@vue/babel-sugar-v-model: 1.1.2
@vue/babel-sugar-v-on: 1.1.2
@vue/cli-overlay: 4.2.3
@vue/cli-plugin-babel: 3.5.1 => 3.5.1
@vue/cli-plugin-router: 4.2.3
@vue/cli-plugin-typescript: ^3.5.1 => 3.12.1
@vue/cli-plugin-vuex: 4.2.3
@vue/cli-service: ^4.2.0 => 4.2.3
@vue/cli-shared-utils: 3.12.1
@vue/component-compiler-utils: 3.1.1 (3.1.1)
@vue/preload-webpack-plugin: 1.1.1
@vue/web-component-wrapper: 1.2.0
mpvue-page-factory: 1.0.1
mpvue-template-compiler: 1.0.13
uni-h5-vue: 2.6.10
uni-mp-vue: 2.6.10
vue: ^2.6.11 => 2.6.11
vue-class-component: ^6.3.2 => 6.3.2 (7.2.3)
vue-hot-reload-api: 2.3.4
vue-loader: 15.9.0 (15.9.0)
vue-property-decorator: ^8.0.0 => 8.4.0
vue-router: 3.0.1
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.11 => 2.6.11
vue-template-es2015-compiler: 1.9.1
vuex: ^3.0.1 => 3.1.3
npmGlobalPackages:
@vue/cli: Not Found
- 设备信息 无
补充信息
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]
经过浏览器查看dom元素,发现在未导入组件的情况下<view>
正确渲染为<uni-view>
标签,但在导入组件后,该组件的父元素均被渲染为<v-uni-view>
,因此出现了Unknown custom element: <v-uni-view>
<!-- 没有导入组件的情况渲染结果 -->
<uni-view data-v-1badc801="" class="content"></uni-view>
<!-- 导入组件的情况渲染结果 -->
<v-uni-view data-v-1badc801="" class="content">
<uni-view data-v-5878582f="" data-v-1badc801="" class="uni-list"><uni-view data-v-d71c46ca="" data-v-1badc801="" class="uni-list-item"><uni-view data-v-d71c46ca="" class="uni-list-item__container uni-list-item--first"><!----><uni-view data-v-d71c46ca="" class="uni-list-item__content"><uni-text data-v-d71c46ca="" class="uni-list-item__content-title"><span>标题文字</span></uni-text><!----></uni-view><uni-view data-v-d71c46ca="" class="uni-list-item__extra"></uni-view></uni-view></uni-view></uni-view>
</v-uni-view>
可以看到根结点被渲染成v-uni-view了
【虽然可以运行,但一直报错也很烦,希望修复下】