nuxt js“无法在'Node'上执行'appendChild'：此节点类型不支持此方法”在移动视口上

Posted 2023-02-22

【中文标题】nuxt js“无法在\'Node\'上执行\'appendChild\'：此节点类型不支持此方法”在移动视口上

【英文标题】：nuxt js "Failed to execute 'appendChild' on 'Node': This node type does not support this method" on mobile view portnuxt js“无法在'Node'上执行'appendChild'：此节点类型不支持此方法”在移动视口上

【发布时间】：2020-09-19 07:41:00

【问题描述】：

尝试在移动视口上使用vuetify 运行我的nuxtjs 应用程序时发现此错误，但在桌面视口上一切运行良好。

本地机器上的错误image : error on local machine：

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect html markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

使用 ubuntu 和 nginx 运行我的 nuxtjs 应用程序的服务器上的错误 pm2 使用 yarn build 然后pm2 start yarn -- start image : error on server

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

这两个错误发生在同一个场景中。

当我在桌面视口上运行它时，然后切换到移动视口（无需重新加载页面）它运行良好。但是如果我在移动视口上重新加载它，就会发生这些错误。

不确定我应该分享哪个页面，因为这个错误发生在所有页面上，甚至在 nuxt+vuetify 默认主页上。

目前桌面视口上也会出现相同的错误，但通过将我的组件包装在<client-only></client-only> 中已修复，并且错误从桌面视口消失但仍出现在移动视口上。

【参考方案1】：

检查你是否使用v-if指令

尝试将其更改为v-show，因为v-show 呈现HTML 并将显示属性设置为true 或false，而v-if 不呈现（真正的conditional rendering）。

在我的例子中，我在模板中的某些节点上使用了v-if，并将其替换为v-show 将元素保留在 DOM 中并帮助丢失了这样的节点错误。

【参考方案2】：

如果你使用asyncData，把渲染它的模板部分放在<client-only>标签中，如果你添加代码人们可以更好地帮助你

【讨论】：

刚刚意识到我在我的问题中遗漏了一些东西，我已经将我的组件包装在“”标签中，它修复了桌面视口中的错误。由于错误发生在所有页面中，不确定我必须共享哪个模板代码，我仍在尝试找出导致此错误的组件

【参考方案3】：

在我的情况下，我使用的是 Bootstrap Vue 并且一些标签被错误地关闭了，我在我的项目中的很多文件中都有以下格式错误的标签：

<b-icon icon="icon" />

And 

<b-img src="https://url.com"/>

我需要将它们更改为：

<b-icon icon="icon"></b-icon>

And 

<b-img src="https://url.com"></b-img>

请检查您的标签是否按照文档所述关闭，我还可以推荐您使用html-validator，这对我了解一些由格式错误或不推荐使用的代码导致的常见 Hydration 错误有很大帮助。

【参考方案4】：

就我而言，这个错误是在我想使用 vuex 持久库时发生的。

This 的回答对我帮助很大，但我不知道是哪些元素导致了错误，所以我最终将整个应用程序包装在其中，它就可以正常工作了！

// ~/layouts/default.vue
<template>
  <v-app v-if="!loading">
    ...
  </v-app>
</template>

<script>
export default 
  data: () => (
    loading: true
  ),
  created() 
    this.$nextTick(function() 
      this.loading = false
    )
  

</script>

【参考方案5】：

您可以看到这一点有几个原因。一个也是因为您在输入字段的末尾有/ 符号（水合问题）。