移动端视口下出现nuxt js "Failed to execute 'appendChild' on 'Node': This node type does not support this method"错误

Question

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

本地机器上的错误图片：本地机器上的错误：

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.

在运行了yarn build然后pm2 start yarn -- start的nuxtjs应用程序中，使用pm2在带有ubuntu和nginx的服务器上出现错误图片：服务器上的错误。

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

两个错误在相同的情况下出现。

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

不确定应该分享哪个页面，因为这些错误出现在所有页面上，即使是nuxt+vuetify的默认主页也是如此。

目前在桌面视口上也出现了同样的错误，但通过将我的组件包装在<client-only></client-only>中进行修复，桌面视口上的错误已消失，但在移动视口上仍然存在。

- fachrilinggo

Answer 1

检查是否使用了 v-if 指令。

尝试将其更改为 v-show，因为 v-show 会呈现 HTML 并将显示属性设置为 true 或 false，而 v-if 则不会呈现 (真正的条件渲染)。

在我的情况中，我在模板中的一些节点上使用了 v-if，用 v-show 替换它可以使元素保留在 DOM 中，并有助于解决这样的缺少节点错误。

- Kostadin Terziev

---

非常感谢，这对我很有帮助。我的问题是在 v-app-bar 中使用了一些没有 v-else 的 v-if 指令。此外，我还不得不更改 v-navigation-drawer 组件并在其中添加 app 指令。 - Alireza Bahrololoom

哦，哇，这对我有用 - 我在组件的顶层元素上使用了 v-if，并进行了静态生成，当我通过 GET 参数动态加载该组件时，出现了错误 - 使用 v-show 解决了它！ - bhu Boue vidya

这对我很有帮助。我在父级 div 上使用了 v-if，而子元素是使用 v-for 渲染的。在 SSR 中它可以工作，但在静态模式下失败了。非常感谢！ - Sjoerd

Answer 2

在我的情况下，当我想要使用vuex持久库时，出现了这个错误。

这个答案对我很有帮助，但是我不知道哪些元素导致了这个错误，所以最后我把整个应用程序都包在里面，然后它就正常工作了！

// ~/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>

- Mohsen Pakzad

Answer 3

所以我花了几天时间试图弄清楚为什么它会在我的一个项目中发生。即使我不能给你一个解决方案，我也会告诉你，你可以缩小到它来自哪里。

你需要做的是用 <client-only></client-only> 封装整个应用程序，以确保它是 SSR 问题（这几乎肯定是这种情况）。

然后逐步封装您项目的部分。例如只有 <header>。这样，您就可以理解它来自哪里并应用适当的解决方案。

以防万一，在我的特定情况下，这是由于 vuex-persistdata 导致的，我最终只封装了这个部分，因为我不需要它在 SSR 中。

- Baldráni

---

这个对我有用。由于我的应用程序不使用SSR，我在布局中添加了<client-only></client-only>。谢谢Baldráni。 - gilzonme

Answer 4

如果您使用asyncData，请将呈现它的模板部分放在<client-only>标签中。如果您添加此代码，其他人可以更好地帮助您。

- Mohsen

---

刚刚意识到我在问题中漏掉了一些信息，我已经将我的组件包裹在<client-only>标签中，并且这修复了桌面视口中的错误。不确定我需要分享哪个模板代码，因为错误发生在所有页面中，我仍在努力找出是哪个组件导致了这个错误。 - fachrilinggo

Answer 5

你需要使用仅客户端标签。

<template>
  <div id="container">
     <client-only>
        <Components>
     </client-only>
  <div>
</template>

- abdurrahimi

Answer 6

我遇到了这样的问题。这个问题是由于不正确的HTML标记引起的。

- Asadbek Eshboev

Answer 7

在我的情况下，问题是由这部分引起的：

<Card
  v-for="(obj, index) in myArray"
  :key="index"
  :obj="obj"
/>

然后我通过更改key来解决了这个问题，例如：

<Card
  v-for="(obj, index) in myArray"
  :key="`${obj.title}-${index}`"
  :obj="obj"
/>

我认为问题是由于我的模板中有一些带有v-for和:key="index"的标签（因此某些组件具有相同的索引），这可能会导致Nuxt的内部冲突。

由于某种原因，这个问题只在生产环境中出现。

- TitanFighter

Answer 8

在我的情况下，我正在使用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，这对我理解由于格式错误或弃用代码引起的常见水化错误有很大帮助。

- Jonathan Arias

Answer 9

我使用了

<NuxtLink to="/services-details">
   <a>Chemistry Tutor Jobs</a>
</NuxtLink>

然后改为

<NuxtLink to="/services-details">
       <div>Chemistry Tutor Jobs</div>
    </NuxtLink>

已修复。

- Masoud

Answer 10

使用<client-only>标签来处理在客户端上工作的插件，例如：滑块、选择器、时间选择器或任何不需要进行服务器端渲染（SSR）和搜索引擎优化（SEO）的内容。

在本地主机上，打开控制台选项卡并设置指针以了解出错的元素所在位置。

我曾经遇到过同样的问题，是因为我在<client-only>标签中使用了Carousel。

有时候，这是因为使用了v-if，应该使用v-show代替。

- Mohammad Nadr