我得到一个 Failed to mount component: template or render function not defined in IE11 but not defined in

Posted 2023-02-22

【中文标题】我得到一个 Failed to mount component: template or render function not defined in IE11 but not defined in other browsers。如何定位故障点？

【英文标题】：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?

【发布时间】：2021-12-29 08:28:04

【问题描述】：

我们有一个在生产中运行的成熟 Vue/Nuxt 应用程序，在我们最近的 sprint 中，我实施了一系列非常常见的更改，我们通常会针对新功能进行更改。

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

该页面在 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>

相同的页面组件在其他同事的分支中运行良好。所以很明显这是我的“一个”改变，但我无法识别任何相关的组件。特别是考虑到它可以在其他浏览器中运行。

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

我尝试调试的步骤；

注释掉我的大部分更改所在的子组件 - 没有更改 将模板块中的所有内容替换为“Hello World！ - 没有变化 确保故障页面组件中的每个组件都存在导入（以确保 Nuxt 配置的自动导入不会在 IE 中退出 - 几个月来一直运行良好） 杀死服务器并多次重建应用程序，以确保热重载不是问题 定期在 IE 中硬重新缓存页面，以防万一它是一个哔哔声并记住不应该记住的东西

可以确认；

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

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

我很烦恼在 IE11 中可能会发生什么更改以仅破坏此页面。

当然，IE11 除外。哎呀。我知道。但是我们还不能…… :(

任何关于我可以测试/调试的其他建议/帮助将不胜感激。

【问题讨论】：

是的，IE 已被杀死并且已被弃用，因此总体上会出现一些问题。我觉得你，如果你还需要维护它。我想说最好的办法是让一个哥们去你的分店，在他的机器上试一试。或者擦除整个项目，克隆+安装它，然后重试。在未安装扩展程序的私人窗口中。另外，如果还没有完成，也许运行 ESlint，这可能是微不足道的。另外，也许是你的 babel/browserslist 配置弄乱了一些 JS 方法的 polyfill？它不适用于开发、生产（本地构建）或两者兼而有之？也许分享一些代码。

谢谢@kissu...它已被社区弃用，但懒惰的软件供应商却不赞成。所以，是的，仍然需要支持。它在本地或我们的测试环境中不起作用，所以我怀疑它会在另一台机器上运行。我怀疑它对我在这些更改中使用的 ES5/6 方法犹豫不决，就像你建议的那样 - 在其他页面中仍然可以正常工作，但由于某些随机原因在这里不起作用。由于敏感，我也无法共享代码，因为我不知道是什么原因造成的 - 它必须是所有代码。基本上我希望有一个独角兽的答案来提供一个“啊哈”的时刻。

如果没有可重现的样本，就很难进行调试，而且有许多不同的问题都可能导致此问题。在这种情况下，我想我只能提供一些类似的线程供您参考。例如，您可以参考this thread和this thread，看看有没有适合您情况的解决方案。

感谢@YuZhou，我看到了许多类似的答案，它们通常会导致更明显的原因，例如缺少模板包装器或与我们所拥有的完全不同的实现。例如，我不记得包含 Nuxt 的帖子。我认为这里的关键问题是：为什么一个页面已经运行了好几个月，遵循与在所有浏览器中继续运行的其他类似页面相同的约定，现在只能在 IE11 中呈现。即在这种特定情况下什么会引发此错误消息？

【参考方案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 属性 - 没有变化 更改 field-id 和 field-name 属性以使用静态值，即不使用指令 - _id 呈现 尤里卡！ 将 field-id 和 field-name 属性更改为静态值，但再次使用指令 - _id 呈现 好奇 使用指令将 field-id 和 field-name 属性更改回动态值 - _id 渲染 嗯？但是……好吧好吧 _id 现在在 IE11 中呈现，但有效地使用与以前相同的代码。嗯。 注意：我已将 :row="true" 更改为仅行（过去是动态设置，因此是指令）

结论；

公平地说，我不完全确定 - 也许其他人可以解释，但是 - 这最终是一个构建问题，直到有问题的代码被更改、恢复并重建解决方案后才能纠正。