引入组件时页面上并没有出现组件的影子,其他元素正常,初步确定是组件引入部分语法出了问题,打开开发者工具看到控制台报出错误代码:

 Failed to resolve component: MyButton If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

翻译

无法解析组件:我的按钮如果这是本机自定义元素,请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。

搜到了博主们提供的一些方法比如:

  • 组件的script标签没有添加 setup
  • 引入的时候加了大括号之类的,这种情况很显然不会报出这个错误信息,而是下面这个,而且也会影响页面其他元素的加载
    Uncaught SyntaxError: The requested module '/components/MyButton.vue?t=1676209371149' does not provide an export named 'MyButton'

    最后经过自己的排查,发现问题还是因为导入组件时,在components这一步出了问题导致的

<script>
import MyButton from '../components/MyButton.vue'
export default {
data() {
return {
msg: "我爱vue"
}
},
components: {
MyButton
}
}
</script>
<template>
<h1>{{ msg }}</h1>
<MyButton></MyButton>
<!-- <MyButton></MyButton> -->
</template>

【Vue3】引入组件Failed to resolve component: MyButton If this is a native custom element的更多相关文章

  1. [vue-router] Failed to resolve async component default: Error: Loading chunk 0 failed.

    在整合laravel5.4 和vue2.1的时候遇到一个奇怪的问题 Uncaught SyntaxError: Unexpected token < Error: Loading chunk 0 ...

  2. Vue-cli3.x在开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chunk {/d} failed.或者Uncaught SyntaxError: Unexpected token <错误

    使用Vue-cli3.x开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chu ...

  3. 【Vue.js】vue引入组件报错:该组件未注册?

    [Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...

  4. Tomcat启动报错:org.apache.catalina.LifecycleException: Failed to start component...java.util.zip.ZipException: error in opening zip file

    1.项目环境 IntelliJ IDEA2018.1.6 apache-tomcat-8.0.53 基于springboot开发的项目 maven3.5.3 2.出现问题 从svn同步下项目 启动to ...

  5. ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]]

    今天第一次遇到Failed to start component [StandardEngine[Catalina].StandardHost[localhost].错误,并且在错误提示的后半段出现了 ...

  6. Maven使用tomcat7-maven-plugin插件run时出现错误: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component

    错误如下: A child container failed during startjava.util.concurrent.ExecutionException: org.apache.catal ...

  7. IDEA启动tomcat报错:java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext、ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component

    先看错误日志: -May- ::.M26 -May- :: :: UTC -May- ::29.845 信息 [main] org.apache.catalina.startup.VersionLog ...

  8. VUE3 之 组件传参

    1. 概述 韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才不会被周围的环境所左右,才能取得最终的胜利. 言归正传,之前我们 ...

  9. Android Studio:Failed to resolve ***

    更换电脑后,也更新了所有的SDK的tool,仍然报错:Failed to resolve  各种jar包,出现这种问题主要是因为在Android studio中默认不允许在线更新,修改方法如下:

  10. Vue.js报错Failed to resolve filter问题原因

    Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...

随机推荐

  1. ElasticSearch 单点部署

    1.下载指定的ES版本(7.17.3) https://www.elastic.co/downloads/past-releases/elasticsearch-7-17-3 2.单点部署elasti ...

  2. Unity打包ARCore项目失败,但是其他安卓项目成功

    https://blog.csdn.net/lxbhahaha/article/details/111269980

  3. 了解RTT 和RTO 对于TCP 重传的影响

    前言 我们已经在很多地方了解TCP 的功能和常用字段.但是TCP 传输发生的异常情况总是让我们很棘手,不知改如何处理.陷入迷茫之中.本文章只针对RTT 和RTO 做了解. 描述  RTT (Round ...

  4. Android错误之--Error retrieving parent for item: No resource found that matches the given name 'Theme.A

    改正错误 (虽然内容较少,但是还是选择单独占用一篇) 这个错误,可以说是困扰了我好久,然后就看到可以改变一下使用的Android版本,改成Android 4.0,然后就去试了试,发现真的就好了耶! 就 ...

  5. Promise的使用及原理

    此文章主要讲解核心思想和基本用法,想要了解更多细节全面的使用方式,请阅读官方API 这篇文章假定你具备最基本的异步编程知识,例如知道什么是回调,知道什么是链式调用,同时具备最基本的单词量,例如page ...

  6. 可靠消息最终一致性【本地消息表、RocketMQ 事务消息方案】

    更多内容,前往IT-BLOG 一.可靠消息最终一致性事务概述 可靠消息最终一致性方案是指当事务发起方执行完成本地事务后并发出一条消息,事务参与方(消息消费者)一定能够接收消息并处理事务成功,此方案强调 ...

  7. ES5新增数组常见方法(indexof/forEach/map/filter)

    新增的数组常见方法:以下说明中,红色为必选参数,蓝色为可选参数 1.indexOf(data,start); 用于返回某个数组或者字符串中规定字符或者字符串的位置: var arr = [" ...

  8. STM32 HAL库学习 (3) 中断!

        中断在单片机开发中有着重中之重的地位.    中断即打断,实至CPU再执行当前程序时,由于系统出现了某种需要处理的紧急情况,CPU暂停正在执行的程序,转而去执行另一段特殊程序来处理的出现的紧急 ...

  9. js循环中reduce的用法简单介绍

    reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引 ...

  10. react webpack自定义配置

    在react当中,webpack的配置是被隐藏了的,如果想要配置webpack,有两种方法: 一.暴露出webpack的配置文件(不推荐) 执行 npm run eject 二.使用craco添加配置 ...