Vue.js：在 HMR 上解决的不一致的“未知自定义元素”答案

【问题标题】：Vue.js: inconsistent "Unknown Custom Element" that's resolved on a HMRVue.js：在 HMR 上解决的不一致的“未知自定义元素”
【发布时间】：2020-06-10 19:37:53
【问题描述】：

我熟悉组件注册。这不是与以下相关的容易实现的目标：

问题

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

组件：PropertyEditForm
导入组件：ViewEditChip
ViewEditChip 在其他组件中使用没有问题
我按照PropertyEditForm 中的预期分配组件
- components: {'view-edit-chip': ViewEditChip} (ts)
如果我触发 HMR，此问题就会消失，但在重新加载应用后始终存在

错误：

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

代码

记住这是使用类组件语法的 TypeScript

ViewEditChip 声明：

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

PropertyEditFormdeclaration：

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

PropertyEditForm模板用法：

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

想法

我不确定这是否与它的使用地点或使用方式有关？
我怀疑这是与ViewEditChip 本身有关的问题，或者它是导入的，因为它在许多其他地方使用时没有问题。
- 事实上，PropertyEditForm 的大部分结构都是从其他工作组件中复制/粘贴的
Webpack 问题？

附加信息

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

例如，我有一个 FileSystemTree、FileSystemToolbar 和 FileSystemMainView 组件。如果我在 FileSystemView 视图中使用这些，它会按预期工作。如果我在与上述三个相同的目录中创建一个FileSystem 组件，因此它是可重用的，即使它是来自FileSystemView 的代码的复制/粘贴，我也会开始收到错误。

有限解决方法示例

如果我将FileSystem 上移一个目录，并将导入更改为子目录（有index.ts）而不是.，问题就消失了。但是，如果我将它移回与它正在导入的组件相同的目录，问题就会再次出现。

【问题讨论】：

你能分享你的项目回购吗？我有几个猜测，但看看会很有帮助
听起来您已经完成了研究，但我认为如果不提供更多代码（或全部代码），除非出现奇迹，否则无法在 S/O 上解决此问题。我建议在 Vue 的 github 页面上提交问题并包括 webpack 配置（或至少相关的 sn-ps）。另一种选择是分叉你的 repo，删除东西直到你有一个 MRE (stackoverflow.com/help/minimal-reproducible-example)，然后从 github 或另一个开源 repo 共享整个 repo。
除非你能提供一个最小的可重复的例子，否则这个问题不太可能得到一个可靠的答案，特别是因为这是一个非常具体的案例。
@DouglasGaskell 我假设你已经修复了它，但是我在我的环境中遇到了同样的错误（我也在使用带有类组件的 TS），就我而言，它变成了成为一个循环依赖问题。 HMR 发生后，它可以成功解决依赖关系，但在那之前就不行了。我有使用 B 的组件 A，它使用了 A（模式中的嵌套编辑器）。如果其他人遇到同样的错误并且不知道原因，请检查它。
@ThiagoSilveira 在正确的路径上，循环引用在我的情况下出现问题

标签： javascript typescript vue.js webpack vuetify.js

【解决方案1】：

如果此问题似乎不一致地发生，并且您的程序在热重载后按预期运行，但在刷新后没有，您可能在 Vue 初始化后注册了您的组件。下面是一个来自 main.js 的 vue-js-modal 的不正确和正确的全局组件注册示例。

例如（不正确）：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

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

import VModal from "vue-js-modal";
Vue.use(VModal)

应该是：

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')

【讨论】：