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.

Answer 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.

Answer 2

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>

Answer 3

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