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

Question

我们有一个成熟的 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 我们没有在其他地方使用过的功能 - 或者已经在这个页面上使用过 - 所以突然导致它似乎很奇怪。

我尝试调试的步骤；

注释掉我的大部分更改所在的子组件 - 没有更改
用`Hello World! 替换模板块中的所有内容！ - 没有变化
确保失败页面组件中的每个组件都存在导入（以确保 Nuxt 配置的自动导入不会在 IE 中失效 - 它已经工作了几个月）
关闭服务器并多次重建应用程序，以确保热重载不是问题
定期在 IE 中硬重新缓存页面，以防万一它是一个 bleeeep 并记住它不应该的东西

可以确认；

没有changes/updates 已对包
未对应用配置进行任何更改
文件夹位置没有变化 - 因此路由 - 页面组件位于
没有对底层布局文件进行任何更改（尽管错误消息表明问题所在）

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

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

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

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

Answer 1

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

很明显，这是模板内部的一个问题，但是所涉及的模板范围内没有任何内容包含未在其他地方使用但在 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" 更改为仅行（过去是动态设置的，因此是指令）

结论;

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

我收到无法安装组件：模板或渲染函数未在 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?

javascript

vue.js

vue-component

nuxt.js

internet-explorer-11