nuxt js "Failed to execute 'appendChild' on 'Node': This node type does not support this method" on mobile view port

user_11542678 0
Viewed 25209

found this error when trying to run my nuxtjs app with vuetify on mobile viewport, but everything runs well on desktop viewport.

error on local machine 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.

error on server with ubuntu and nginx running my nuxtjs app with pm2 using yarn build then pm2 start yarn -- start image : error on server

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

both errors occur in the same scenario.

when i run it on desktop viewport, then switch to mobile viewport (without reloading the page) it runs well. but if i reload it on mobile viewport, these error occur.

not sure which page I should share because this error occur on all pages even on the nuxt+vuetify default homepage.

currently the same error also occur on desktop viewport, but it's fixed by wrapping my component inside <client-only></client-only>,and error gone from desktop viewport but still occur on mobile viewport.

nuxt.js vuetify.js vue.js javascript
10 Answers

Check if you are using v-if directive

Try changing it to v-show because v-show renders the HTML and sets display property to true or false, while v-if doesn't render (real conditional rendering).

In my case, I had v-if on some nodes in my template and replacing it with v-show kept the element in the DOM and helped missing node errors like this.

user_106001490

In my case, this error occurred when I wanted to use vuex persistent libraries.

This answer is helped me a lot, but I didn't know which elements cause the error, so I ended up wrapping my whole app in it and it just worked!

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

If you use asyncData put the section of template that render it in <client-only> tag, If you add the code people can better help you

user_25416580

you need client only tags

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

So I spent days on trying to figure out why it was happening on one of my project. And even if can't give you a solution I would tell you that you can narrow down to where it comes from.

What you have to do is to encapsulate your whole app with <client-only></client-only> to ensure it's an SSR problem (Which is almost for sure the case).

Then piece by piece you encapsulate only part of your project. For exemple only the <header>. That way, you'll be able to understand where it comes from and apply a proper solution.

Just in case, in my specific case it was due to vuex-persistdata and I finished just encapsulating this part since I wasn't needing it in SSR.

user_46151780

I had like this problem. The problem was caused by incorrect HTML markup.

user_169388970

There are a few reasons why you can see this. One is also because you have / sign at the end of the input field (hydration problem).

user_75589460

In my case I am using Bootstrap Vue and some tags were wrongly closed, I had the following bad formatted tags in a lot of files inside my project:

<b-icon icon="icon" />

And 

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

And I needed to change them to:

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

And 

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

Please check that your tags are closed as the documentation says, I can also recommend you to use html-validator, which helped me a lot to understand some common Hydration errors caused by bad formatted or deprecated code.

user_70805730

I used

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

then changed to

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

and fixed.

user_27131250

In my case the issue was caused by this part:

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

Then I fixed this issue by changing the key, like:

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

I think the problem was due to the fact that my template had few v-fors with :key="index" (so few components had the same index) as a result it could lead to some Nuxt's internal collision.

For some reason this issue appears just in production environment.

user_49922480
Related