Javascript Vue.js：不一致；未知自定义元素“；那'；s已在HMR上解决

我熟悉组件注册。这不是与以下内容相关的低垂果实：

@Component({name: 'view-edit-chip'})

@Component({
    name: 'property-edit-form',
    components: {
        'view-edit-chip': ViewEditChip
    }
})

<view-edit-chip :item.sync="item"></view-edit-chip>

问题 在使用dev服务器时，我在一个组件（现在有几个）中遇到了不一致的“未知自定义元素”问题。这似乎只有在我重新加载页面时才会发生，并且如果我提示dev服务器重新加载热模块（HMR）（即更改模板中的某些内容并保存文件），就会开始正常工作

• 组件：

  PropertyEditForm

• 导入的组件：

  ViewEditChip

• ViewEditChip

  用于其他组件，没有问题
• 我按照

  属性编辑表单中的预期分配组件
  
  组件：{'view-edit-chip'：ViewEditChip}
  （ts）
  

• 如果我触发HMR，这个问题就会消失，但在重新加载应用程序后总是存在

错误：

未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项

代码 请记住，这是使用类组件语法的TypeScript

ViewEditChip

声明：

@Component({name: 'view-edit-chip'})

@Component({
    name: 'property-edit-form',
    components: {
        'view-edit-chip': ViewEditChip
    }
})

<view-edit-chip :item.sync="item"></view-edit-chip>

属性编辑表单

声明：

@Component({name: 'view-edit-chip'})

@Component({
    name: 'property-edit-form',
    components: {
        'view-edit-chip': ViewEditChip
    }
})

<view-edit-chip :item.sync="item"></view-edit-chip>

属性编辑表单

模板用法：

@Component({name: 'view-edit-chip'})

@Component({
    name: 'property-edit-form',
    components: {
        'view-edit-chip': ViewEditChip
    }
})

<view-edit-chip :item.sync="item"></view-edit-chip>

思想

• 我不确定这是否与它的使用地点或使用方式有关
• 我怀疑这是一个与

  ViewEditChip

  本身有关的问题，或者它的导入，因为它在许多其他地方使用时没有问题。
  • 事实上，

    PropertyEditForm

    的大部分结构都是从其他工作组件复制/粘贴的
• 网页问题

附加信息 我的应用程序中越来越多的组件开始出现这种情况。我不知道原因，也无法提出复制案例。所有这些错误只会在站点完全重新加载时发生，并在HMR上修复，并且可能会或可能不会发生在相同的组件上，具体取决于它们在应用程序中的使用位置，这对我来说似乎是不明智的

例如，我有一个

文件系统树

，

文件系统工具栏

，&

文件系统视图

组件。如果我在视图

FileSystemView

中使用它们，它将按预期工作。如果我在与上述三个组件相同的目录中创建了一个

文件系统

，因此它是可重用的，那么即使它是

文件系统视图

中代码的副本/粘贴，我也会开始收到错误

有限解决方案示例

---

如果我将

文件系统

向上移动一个目录，并将导入更改为subdir（具有

索引.ts

），而不是

，问题就会消失。但是，如果我将其向下移动到与其导入的组件相同的目录中，问题就会再次出现。

如果此问题似乎发生不一致，并且在热重新加载后，而不是刷新后，您的程序可以按预期工作，则您可能正在Vue初始化后注册您的组件。下面是一个不正确和正确的全局组件注册示例，来自main.js的vue js模式

例如（不正确）：

应该是：

import Vue from 'vue'
import App from './App.vue'
import VModal from "vue-js-modal";
Vue.use(VModal)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

---

你能分享你的项目回购协议吗？我有几个猜测，但如果只是看一看会有很大帮助听起来你已经完成了你的研究，但我不认为这可以在S/O上解决，而不提供更多的代码——或者全部——除非奇迹发生。我建议在Vue的github页面上提交一个问题，并包括webpack配置（或至少相关的代码片段）。另一种选择是分叉你的回购，删除东西直到你有一个MRE（），然后从github或另一个开源回购共享整个回购。除非你能提供一个最小的可复制的例子，否则这个问题不可能得到可靠的答案，特别是因为这是一个非常特殊的情况。@DouglasGaskell，我假设您已经修复了它，但我的环境中也出现了相同的错误（我也在使用类组件的TS），在我的情况下，这是一个循环依赖性问题。HMR发生后，它可以成功地解决依赖关系，但在此之前不能。我让组件A使用B，B使用A（模态中的嵌套编辑器）。如果其他人也有同样的错误，并且不知道为什么，检查一下。@ThiagoSilveira在正确的路径上，循环引用我的例子中的问题所在