我收到无法安装组件:模板或渲染函数未在 IE11 中定义,但在其他浏览器中未定义。如何定位故障点?

I'm getting a Failed to mount component: template or render function not defined in IE11 but not other browsers. How to locate point of failure?

我们有一个成熟的 Vue/Nuxt 应用程序 运行 在生产中,对于我们最近的冲刺,我实现了一些我们通常会为新功能所做的非常常见的更改。

更改不包括对主要页面组件或底层布局组件的任何结构更改,而是大部分更改是在现有子组件中进行的。

该页面在 Chrome、Edge、Firefox 等中运行良好...通常的情况...但在 IE11 中则不然。

我在页面加载时意外收到以下错误;

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
    <Nuxt>
        <VApp>
            <Layouts/default.vue> at layouts/default.vue
                <Root>

同一个页面组件在其他同事的分支上工作正常。很明显这是我的 'one' 更改,但我无法识别任何相关组件。特别是考虑到它适用于其他浏览器。

例如,这是否可能是由于未加载意外需要的 polyfill 而发生的?我没有使用任何 ES5/ES6 我们没有在其他地方使用过的功能 - 或者已经在这个页面上使用过 - 所以突然导致它似乎很奇怪。

我尝试调试的步骤;

可以确认;

正如 Vue 开发人员所知,当您在应用程序深处的某处弄乱了与布局组件完全无关的组件时,通常会看到此一般性错误 - 一旦修复 - 此一般性错误就会消失。因此,我注释掉了我的子组件,看看是否是导致问题的原因。

我很恼火,因为在 IE11 中可能只破坏了这个页面。

当然除了IE11。呃。我知道。但是我们不能...还:(

任何 suggestions/help 我还可以 test/debug 将不胜感激。

我知道是什么原因造成的,但这有点奇怪。

很明显,这是模板内部的一个问题,但是所涉及的模板范围内没有任何内容包含未在其他地方使用但在 IE11 中仍能正常工作的代码。

模板链;

Default.vue (layout)
   > pages
      > {program}
         > {form}
            > _id.vue (this was the 'anonymous' template above)
               > ServiceClaim.vue (shared component, changes were made here)

过程;

  • 来自 _id.vue 模板的评论 ServiceClaim 引用 - _id 未呈现
  • 还评论了 ServiceClaim 导入 - 呈现的 _id
  • 未注释的 ServiceClaim - _id 未呈现(绝对在这里,太棒了)

在ServiceClaim组件中;

  • 评论了所有模板标记 - 呈现的 _id
  • 评论了除之前声明列表之外的所有内容 - 呈现的 _id
  • 仅评论表单标记 - 呈现的 _id
    • 问题在表单中...
  • 使用 .include ES6 函数填充的注释字段 - _id 未呈现
    • 所以这是一个带有列表项的控件...
  • 评论字段检索列表项 - _id 呈现
    • 已确认...
  • 一个一个评论控件,直到我发现它是一个单选组控件
  • 列表项的重构存储和检索 - 无变化
  • 为保持一致性添加了 field-id 属性 - 没有变化
  • 更改字段 ID 和字段名称属性以使用静态值,即不使用指令 - _id 呈现
    • 尤里卡!
  • 将 field-id 和 field-name 属性更改为静态值,但再次使用指令 - _id 呈现
    • 好奇
  • 使用指令 - 呈现的 _id 将字段 ID 和字段名称属性更改回动态值
    • 诶?不过……还好
  • _id 现在在 IE11 中呈现,但有效地使用与以前相同的代码。嗯嗯。
    • 注意:我已将 :row="true" 更改为仅行(过去是动态设置的,因此是指令)

结论;

公平地说,我不完全确定 - 也许其他人可以解释,但是 - 这最终是一个构建问题,在更改、恢复和重建解决方案之前无法纠正有问题的代码。