CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsnuxt.js
fachrilinggo
fachrilinggo

Reputation: 283

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

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.

Upvotes: 27

Views: 41846

Answers (14)

Mark Shust at M.academy
Mark Shust at M.academy

Reputation: 6429

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!

Upvotes: 0

Mohammad Nadr
Mohammad Nadr

Reputation: 533

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

Upvotes: 0

Elvis Matus
Elvis Matus

Reputation: 1

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.

Upvotes: 0

Abdlmjeed Jamaan
Abdlmjeed Jamaan

Reputation: 74

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

Upvotes: 0

Asadbek Eshboev
Asadbek Eshboev

Reputation: 111

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

Upvotes: 2

Baldr&#225;ni
Baldr&#225;ni

Reputation: 5640

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.

Upvotes: 3

abdurrahimi
abdurrahimi

Reputation: 21

you need client only tags

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

Upvotes: 2

TitanFighter
TitanFighter

Reputation: 5074

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.

Upvotes: 1

Kostadin Terziev
Kostadin Terziev

Reputation: 625

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.

Upvotes: 29

Masoud
Masoud

Reputation: 342

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.

Upvotes: 0

Mohsen Pakzad
Mohsen Pakzad

Reputation: 251

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>

Upvotes: 11

Jonathan Arias
Jonathan Arias

Reputation: 580

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.

Upvotes: 0

Mieszczańczyk S.
Mieszczańczyk S.

Reputation: 957

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

Upvotes: 0

Mohsen
Mohsen

Reputation: 4235

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

Upvotes: 4

Related Questions