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.

Hallux

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.

Hawthorn

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. – Hora

oh wow, that worked for me - I had a v-if on the top level element of a component, and was doing a static generate, and when I loaded that component dynamically via a GET param I got the error - v-show fixed it!! – Portsmouth

This helped me out. I had a v-if on a parent div with childs that were rendered using v-for. In SSR it worked but on static mode it failed. Thanks a lot! – Idyll

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>

Lenlena

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

Batholomew

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 – Hallux

Answer 4

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.

Roque

This one worked for me. I've added <client-only></client-only> this in layout as my app doesn't use SSR. Thanks Baldráni – Retributive

Answer 5

you need client only tags

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

Firearm

Answer 6

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

Systematology

Answer 7

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.

Indivisible

Answer 8

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

Plea

Answer 9

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.

Wristband

Answer 10

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.

Hereat

Answer 11

For my case (ssr), i just move the code from "beforeMount" hook to "mounted" and had no issues.

Butcher

Answer 12

In my case the problem occurred after logging in. It was because I had this in my Html:

<p>{{ $auth.user.email }}</p>

The solution was to control the email value in a variable, not using this directly in the HTML.

Cyclopedia

Answer 13

use <client-only> for plugins that have to work at client like : sliders select data pickers time pickers or anything that doesnt need to SSR SEO in local host go to console tab and set pointer to know where is the element make error

i had same problems that was for Carousel that i use , i write it in the <client-only>

and sometime its for useing v-if use v-show instead

Suture

Answer 14

For me, it was caused by multiple-nested ul.li's. Not sure what was going on, but I kept the inner ul.li and changed the outside one to <div> tags, and all is now fixed!

Marquis

Answer 15

I have had the same issue but no fixes. I even do not know where my problem comes from. All is well locally. This issue comes when the app is deployed to production and in the admin dashboard.

Maybe someone knows what could be wrong.

Purpleness

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Odelet