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

Question

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.

Solution 1

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.

Solution 2

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.

Solution 3

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>

Solution 4

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

View more solutions

Comments

[fachrilinggo]

just realize i miss something in my question, i already wrap my component inside `<client-only>' tag, and it's fix the errors in desktop viewport. not sure which template code i have to share since the error occur in all page, i'm still trying to figure out which component couses this error

[Alireza Bahrololoom]

thanks a lot. worked for me. my problem was having some v-if directives without v-else in v-app-bar. also I had to change v-navigation-drawer component and added app directive in that.