Nuxt.js: Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.We [as appendChild]

[Jussiadev]

I have an error

 Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.We [as appendChild]

nuxt "version": "1.0.0",

I do npm run build and npm run start.

_{This bug report is available on Nuxt.js community (#c1383)}

[STnetwork]

I have the same error, with generated static after a yarn generate in the console dev, but the page appears to be displayed correctly.

client.js:37 [nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. at Object.Qe [as appendChild] (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:23837) at p (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:51346) at u (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:50597) at h (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:51429) at k (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:54374) at k (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:54311) at a.t.nodeOps [as __patch__] (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:54908) at a.t._update (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:43512) at a.r (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:10997) at io.get (http://mydomain.com/_nuxt/common.b4c86636141262f1c64f.js:2:39746) (anonymous) @ client.js:37 Promise rejected (async) T23V @ client.js:36 n @ bootstrap 0648448381678a4ce7b3:54 window.webpackJsonp @ bootstrap 0648448381678a4ce7b3:25 (anonymous) @ app.8b23d36a19073197491e.js:1

---

Edit : I have this error only with yarn generate.
yarn dev & yarn start work well.

[victorkane]

Edit: Please forgive me, I have just discovered that, in my case, the error was created by invoking the v-html directive using badly formed html. A closing </blockquote> tag was inserted without a corresponding opening tag Thanks so much for nuxt.js!

I have the same error. The interesting thing is that the error is only created upon reloading the page, or else invoking the url. AND only upon doing npm run build and npm start, it never occurs under npm run dev. So to reproduce the error, I need to build and do npm start, then reload the offending page (or else invoke its url directly in the browser).

It is a long text containing html and I am using the v-html directive.

[yoyo837]

I have this error with yarn start after build.yarn run dev is work fine. yarn generate has not tried.

It looks like a

<nuxt-link to=“/user/my”>link</nuxt-link> 

rendered TextElement that tries to add a child node.

nuxt "version": "1.0.0-rc11",

Hash mode.

[lukasborawski]

@Atinux can you help with this, have the same error ...

[vuchl]

@yoyo837 can you try

<nuxt-link to=“'/user/my'”>link</nuxt-link> 

(see the single quotes inside the link)

[calebanthony]

I'm also experiencing this issue. I managed to (partially) fix the issue by adding trailing slashes to URLs, but it's still broken.

Nuxt version 1.0.0-rc11.

Here's the repo
Here's the live site

To reproduce the error, visit this page directly. The site works fine on all the other pages. The site also works fine if you navigate to that page from any other page on the site.

There are two issues here (that I think are related):

1. You'll see that the sidebar doesn't get loaded. It does when you visit the home page and then navigate to that page, though.
2. There will be a brief flash of text on reload. Specifically where it says "A helper tool for keeping..." at the 3rd paragraph down, not the sub-header. It will flash for a second and say "The tricky part of the game...".

The weird part is that the text that flashes at first is correct. It then gets replaced with old text that doesn't exist anywhere. If I do a full search of my entire project directory in my IDE, the only place that text shows up is in .nuxt and then again in dist/_nuxt after I do yarn generate. It's literally nowhere else.

I've tried deleting my entire .nuxt, dist, and node_modules directory, running yarn to fully reinstall everything, and then yarn generate to generate the static site. Same error.

[Atlas-GN]

I'm also experiencing this error on this page:

<template>
  <main v-if="!$store.state.authUser">
    <h1>Greylore Portal</h1>
    <form @submit.prevent="login">
      <p class="error" v-if="loginError">{{ loginError }}</p>
      <p>Email: <input type="email" v-model="loginEmail" name="email"></p>
      <p>Password: <input type="password" v-model="loginPassword" name="password"></p>
      <button type="submit">Enter</button>
    </form>
  </main>
  <main v-else>
    <h1>Welcome, {{ $store.state.authUser.username }}!</h1>
    <button @click="logout">Exit</button>
  </main>
</template>

It only occurs when I have successfully logged in and then I refresh the page (refresh on no authUser results in cleanly rendering the v-if section).

Also, I get a slightly different error when I "npm run dev". Instead of the posted error, I get a [vue warn] about the virtual DOM, and a subsequent error about not being able to call .toLowerCase on something during app initialization.

[Atinux]

#1552

[atmar]

I want to note that I don't receive a vue warn about the virtual DOM. The error also only happens on my live server for me, which is really strange.

Another example of this issue I had :

                <div class="eleven wide column no_padding">
                  <img :src="`${$store.state.imageUrl}/assets/img/products/header/260x121/${product.product.image_cover}`" alt="">
                  <div class="prod-desc">
                    <div class="prod-info">
                      <span class="prod-name ellipsis">{{ product.name }}</span>
                      <p class="prod-tags ellipsis">
                        <span class="platform" v-if="product.platforms.windows">
                          <i class="windows icon"></i>
                        </span>
                        <span class="platform" v-if="product.platforms.mac">
                          <i class="apple icon"></i>
                        </span>
                        <span class="platform" v-if="product.platforms.linux">
                          <i class="linux icon"></i>
                        </span>
                        - {{ product.tags.slice(0, 5) | description_tags }}
                      </p>
                    </div>
                  </div>
                </div>

Adding a tag between "products.tag.slice(0,5)" fixed this issue.

                <div class="eleven wide column no_padding">
                  <img :src="`${$store.state.imageUrl}/assets/img/products/header/260x121/${product.product.image_cover}`" alt="">
                  <div class="prod-desc">
                    <div class="prod-info">
                      <span class="prod-name ellipsis">{{ product.name }}</span>
                      <p class="prod-tags ellipsis">
                        <span class="platform" v-if="product.platforms.windows">
                          <i class="windows icon"></i>
                        </span>
                        <span class="platform" v-if="product.platforms.mac">
                          <i class="apple icon"></i>
                        </span>
                        <span class="platform" v-if="product.platforms.linux">
                          <i class="linux icon"></i>
                        </span>
                        <span>- {{ product.tags.slice(0, 5) | description_tags }}</span>
                      </p>
                    </div>
                  </div>
                </div>

I have this issue on another page aswell (as seen in my issue #2004 ), but I've been unable to fix that so far. I even have other issues like content that dissapears when removing some elements (only in production)

[atmar]

Another update, this issue is caused by Cloudflare for me. I've tried a lot of things and one of the last differences with my local server was Cloudflare. I've disabled Auto Minify and everything worked

[Atinux]

Hi,

This bug was due to generate.minify.collapseWhitespace which was true by default, it will be false by default in 1.0 (next release).

in the meantime, to fix this issue, you can add in your nuxt.config.js:

generate: {
  minify: {
    collapseWhitespace: false
  }
}

[mojereliev]

Hi
I'm still watching this error
Changing options generate.minify not solve the problem

[lanbau]

i am getting this error as well. It works perfectly in localhost but when i host the dist/ it has this error.

Changing options generate.minify not solve the problem

[pangboww]

Same error for me also, it works perfectly on localhost but got occasionally Failed to execute 'appendChild' on 'Node' on server

[unwrittenmike]

Also getting this error. Works fine on localhost but geneated files served from dist break. Error is totally random as I can do a build and sometimes the exact same code works

[BlazerYang]

same error as above, and changing generate.minify does not solve my problem

[unwrittenmike]

@BlazerYang
This is what caused my error:
<nuxt-link :class="style.subNavLink" class="relative" to="/">CONFIGURATOR <app-nav-selected v-if="$nuxt.$route.name === 'index'" class="app-nav-selected absolute"></app-nav-selected> </nuxt-link>

Was the v-if changed it to a v-show.

Put a breakpoint in your javascript and you will find the exact node that is causing it.

Not Quite sure why it was a problem yet though

[gangsthub]

If you are still having this issue it may be caused by a problem like Mismatching childNodes vs. VNodes in development that you didn't control. For me was a vuetify's v-btn inside a p tag. I changed the <p> for a <div>. And that made the favor.

[gregorvoinov]

@unwrittenmike same issue here. changed v-if with v-show and the issue was solved...

<ul v-show="(currentPage === 'index' || currentPage === 'lang')" class="list-inline navigation__list" ref="navigationList">
    <li v-for="item in $t('navigation')" >
        <router-link :to=item.scrollTo v-scroll-to="item.scrollTo" class="link">{{ item.label }}</router-link>
    </li>

computed: {
    currentPage: function() {
        return this.$nuxt.$route.name
    }
},

[jhwh]

[nuxt] Error while initializing app TypeError: n.setAttribute is not a function

It's occured even after fresh Nuxt project install and run "yarn nuxt generate" (same thing happen on npm run)

Problem doesn’t appear on "yarn/npm run dev"

npm 5.7.1
yarn 1.0.2
node v8.10.0
vue/cli 3.0
Nuxt 1.4.0
macOS High Sierra

[gangsthub]

@jhwh seems like a completely different issue. Try starting with one of the templates:
https://github.com/nuxt-community/awesome-nuxt#starter-template
I'm using nuxt-community/express and just updated to [email protected] and all seems good for me.

I'd also suggest to start a new issue providing a demo (You can try https://codesandbox.io/) or a repository.

Sorry for the inconveniance.

[KennanChan]

In my case, the issue is caused by v-if on a v-for loop. The v-if generates a comment when not to be rendered. And usually a Vue-Warning saying mismatching virtual nodes and DOMs should logged out maybe becasuse the comment is recognized as a DOM. But somehow this time it just causes an error. Changing v-if to v-show solved my issue.

[gangsthub]

Preventing this kind of errors/warnings is actually not easy at the moment. This has happened to me also with comments not included by me. But I think that it is something more related to Vue itself. It may have to be with the synchronicity of the diffing and the rendering or reconciliation algorithm (if there's actually such a thing in vue). It's what comes to my mind, having this solved by switching to v-show...

[SmelayaPanda]

Faced the same problem, found a not very good solution, but as a temporary crutch can be someone help.
If you set the boot flag and change it in the creation hook, the error can be avoided.

  export default {
     data: () => ({
       loading: true
     }),
     created () {
        this.$nextTick(function () {
           this.loading = false
       })
     }
  }

<template>
   <div v-if="!loading">
    // the elements that cause the error: DOMException: Failed to execute 'appendChild' on 'Node'
  </div>
</ template>

[Chance722]

In my case, I deleted the index.vue of pages directory and added extendRoutes to nuxt.config.js, extendRoutes code like this:

    // redirect default route to 'pc' directory
     routes.forEach(item => {
        if (item.path === '/pc') {
          item.path = ''
        } else if (item.chunkName.includes('pages/pc/')) {
          item.path = item.path.replace('/pc/', '/')
        }
      })

then I got this problem in my homepage or refresh my homepage. finally I added a empty index.vue file to pages directory and make it right. just for reference only.

[jscheller]

OUCH. Same error occurring only in generated project, no sign of any error in dev.

Tried SmelayaPanda's solution, but didn't help.

I ultimately had to work my way through dismantling all manner of things in the project until I found for whatever reason that my use of FontAwesomeIcon in multiple components was the culprit. Stripped out all of the font-awesome-icon instances, but the problem persisted until I yanked the plugin loading FontAwesomeIcon globally. Much better now, even if my app now needs a lot of visual surgery.

This was a monster project I've been working on for a couple of months in dev, should have tried to deploy much earlier in the lifecycle. Hope others learn vicariously from my poor judgement there.

Regardless, this error seems to have several manifestations, and it's virtually impossible to diagnose sensibly in production builds. Since it only occurs in production builds, that's pretty frustrating. Not clear still if this is a Vue or Nuxt centric issue, but it doesn't feel like this issue should have been closed.

[thisAries]

minify 并不能解决 ， 感觉学习成本太大了

[thisAries]

After I uploaded the annotated code to the server, I found that the bug might have been caused by dom operations using third-party plug-ins. I'm using mintui's loadmore. After I removed this component, the whole project ran。
我在不断的注释代码上传到服务器后，发现这个bug可能是使用第三方插件的dom操作导致的。我使用的是mintui 的loadmore。我把这个组件删除后，整个项目运行起来了

[darior87]

I have the same issue after call nuxt generate. The nuxt generate worked for the last 5 moths, but nuxt it gives me this error. No problem with the hot reloading mode. I opened a question on SO with details, configurations and error .

[roman-dynin]

Hello @jscheller !
I have same problem with FontAwesomeIcon, did you find any solution?

[jscheller]

I wound up going through a few iterations on my FontAwesome plugin file and configuration, but I did get things working... I have a file 'font-awesome.js' in the 'plugins' folder in my project that looks like this...

import fontawesome from "@fortawesome/fontawesome";
import FontAwesomeIcon from "@fortawesome/vue-fontawesome";
import Vue from "vue";

import {
  faExpandArrows, faExpandAlt, faCompressAlt, faTimes
} from "@fortawesome/fontawesome-pro-regular";

import {
  faBars, faTimesSquare, faPlusSquare
} from "@fortawesome/fontawesome-pro-light";

import {
  faFacebookSquare, faTwitterSquare, faGooglePlusSquare
} from "@fortawesome/fontawesome-free-brands";

fontawesome.library.add(
  faTimes, faExpandArrows, faExpandAlt, faCompressAlt, faTimes,
  faBars, faTimesSquare, faPlusSquare,
  faFacebookSquare, faTwitterSquare, faGooglePlusSquare
);

Vue.component("fa-icon", FontAwesomeIcon);

...and then in my nuxt.config.js, that file is incorporated like this...

plugins: [
    {src: '~/plugins/font-awesome' },
  ],

...and the WebPack configuration is setup to tree shake the FontAwesome files, again in nuxt.config.js...

build: {
    analyze: true,
    extend(config, ctx) {

      config.resolve.alias["@fortawesome/fontawesome-free-brands$"] =
        "@fortawesome/fontawesome-free-brands/shakable.es.js";

      config.resolve.alias["@fortawesome/fontawesome-pro-regular$"] =
        "@fortawesome/fontawesome-pro-regular/shakable.es.js";

      config.resolve.alias["@fortawesome/fontawesome-pro-light$"] =
        "@fortawesome/fontawesome-pro-light/shakable.es.js";

    }
  },

With all of that in place, I can include corresponding FontAwesome icons in my templates like this...

<fa-icon v-show="!isZoomed" @click="expandClick" fixed-width :icon="['far', 'expand-alt']"/>

I'm still not 100% sure what I was doing wrong originally, but went through a lot of gyrations with no-ssr and other mystic incantations before a couple of folks on Discord pointed me this way. Hope it helps...

[peterzhanghui]

@SmelayaPanda 正解

[command-tab]

Any movement on this? I'm seeing this even in a recent nuxt-edge (2.0.0-25594102.4311aca)

[NishantSinghChandel]

Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
I am also getting this error can anyone help me with this.

[gangsthub]

@nishantsinghchandel try to defer rendering of problematic components or html elements to the created hook as @SmelayaPanda suggested.

[unwrittenmike]

@NishantSinghChandel Take a look at all your v-if's... Make sure that your are not trying to do any DOM updates to DOM nodes that are not present due to the condition of a v-if... Use v-show to get around this if possible

[Timkor]

I'm also experiencing this issue. The weird thing is, if I clear the complete browser cache. The error is gone after a complete refresh.

[lokielse]

@Timkor It may related to auth cookie.

I just found that the error occur when I use nuxt-auth with bootstrap-vue's navbar.

appendChild error:

<b-navbar-nav class="ml-auto">
    <b-nav-item to="/profile" v-if="$auth.loggedIn">Profile</b-nav-item>
    <b-nav-item to="/auth/register" v-if="!$auth.loggedIn">Register</b-nav-item>
    <b-nav-item to="/auth/login" v-if="!$auth.loggedIn">Login</b-nav-item>
</b-navbar-nav>

it works:

<no-ssr>
    <b-navbar-nav class="ml-auto">
        <b-nav-item to="/profile" v-if="$auth.loggedIn">Profile</b-nav-item>
        <b-nav-item to="/auth/register" v-if="!$auth.loggedIn">Register</b-nav-item>
        <b-nav-item to="/auth/login" v-if="!$auth.loggedIn">Login</b-nav-item>
    </b-navbar-nav>
</no-ssr>

If anybody else has this issue, You'd better check if there is at least one child in some specific component(You can search 'v-if' keyword in your project). I think it not related to nuxt issue.

[unwrittenmike]

@lokielse You could also use v-show instead... So that there are always DOM nodes no matter what the state of the variable

[iamsayantan]

Hi, I am also getting this error on production sometimes. And its gone after a refresh. It never happened on my local development environment. The site normally looks okay in this condition but nothing works until I do a page refresh. This is the stacktrace it generates

[nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Object.appendChild (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:223305)
at h (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:238530)
at c (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:238164)
at m (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:238613)
at T (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:241900)
at T (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:241835)
at T (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:241835)
at T (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:241835)
at T (https://example.com/_nuxt/vendor.3478ce27cf196047ba1b.js:2:241835)

This error is so random and gone after a refresh, I can not even debug it properly or have any Idea what causes this.

[gangsthub]

@iamsayantan I kindly invite you to upgrade to nuxt@v2+ ;). I haven't had this problem ever since.

[iamsayantan]

@gangsthub yes I am using version 1.0.0. And 2.0 release notes states there is no breaking changes so I'd upgrade nuxt and lookout for this issue. Thank you.

[jefflam]

Just wanted to drop a note here that I'm on nuxt 2.1.0 and this error still occurs.. so I doubt the issue will be fixed so easily with upgrading nuxt.

More likely than not, it has to do with html markups being broken somewhere. Ideally during dev, the debugger can be more helpful to pinpoint exactly what errorneous markup exists...

[darior87]

In my case, even if I upgrade the nuxt version to 2.1.0, the problem still occurs. it's related on bad html nesting block. I'm using vuetify 1.2.6 and the problem disappear if I remove the router on the sidebar <v-list-tile /> option tag. So, I think is an html problem. I tried to nuxt generate a new blank vuetify project and the problem doesn't appear.

[danchristian]

I ran into this using Nuxt 2.2.0. I managed to drill down and find the piece of code that was causing the problem...

ol
  li(v-if="isAuthenticated")
    nuxt-link(to="/profile") {{ loggedInUser.name }}
  li(v-if="isAuthenticated")
    a(@click="logout") Logout

There were other list items above these that also had v-if on them, but for some reason, these two appearing together caused the error. The error only happened on production, which added to the fun.

I tired reformatting them a million ways but no luck. I tried a few of the fixes above but the only one that worked was @lokielse's fix.

no-ssr
  ol
    li(v-if="isAuthenticated")
      nuxt-link(to="/profile") {{ loggedInUser.name }}
    li(v-if="isAuthenticated")
      a(@click="logout") Logout

[aldarund]

@danchristian its most likely because isAuthenticated on server have different value that on client

[danchristian]

@aldarund I can do the following just fine though:

ol
  li(v-if="isAuthenticated")
    nuxt-link(to="/") Home

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

[littlemousey]

I ran into this problem yeterday with Nuxt version "nuxt": "^2.4.0". When testing my app online on Heroku I saw this error:

[nuxt] Error while mounting app: HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

In my case I use the universal mode, don't know if that is one of the reasons. I found out the problem was the v-if in one of my components by debugging locally by using npm run build and npm run start (if someone knows a quicker way please let me know).

I changed the v-if to v-show as mentioned above and that worked for me.

Code before

<p v-if="favoriteListLength > 1 && favoriteListLength < maximumList">
    You can add {{ maximumList - favoriteListLength }} more Pokémon
</p>
<p v-if="favoriteListLength > 9">
    Your list is full!
</p>
<p v-if="favoriteListLength > 9">
    Do you want to
    <button class="nes-btn is-error" @click="emptyFavoritePokemonList">
    Delete
    </button>
    the list?
</p>

...

  computed: {
    favoriteListLength() {
      return this.stateFavoritePokemonList.length
    }
  },

Code after

<p v-show="morePokemonCanBeAdded">
    You can add {{ maximumList - favoriteListLength }} more Pokémon
</p>
<p v-if="favoriteListLength > 9">
    Your list is full!
</p>
<p v-if="favoriteListLength > 9">
    Do you want to
    <button class="nes-btn is-error" @click="emptyFavoritePokemonList">
    Delete
    </button>
    the list?
</p>

...

  computed: {
    favoriteListLength() {
      return this.stateFavoritePokemonList.length
    },
    morePokemonCanBeAdded() {
      return (
        this.favoriteListLength > 1 &&
        this.favoriteListLength < this.maximumList
      )
    }
  },

It is good to mention here that using a computed property in v-if also did not resolve the error.

[icemirror]

i am getting this error as well. It works perfectly in localhost but when i host the dist/ it has this error.

Changing options generate.minify not solve the problem

@lanbau excuse me, is your problem solved? i also encountered this situation.

[aldarund]

@icemirror if u are using cloudflare u need to disable html minifcation on their side

[CsabaSzabo]

I struggled with this issue and found my root cause:

  export default {
     data: () => ({
       loading: true / false
     })
  }

<template>
   <div v-if="!loading">
    // the elements that cause the error: DOMException: Failed to execute 'appendChild' on 'Node'
  </div>
  <div v-else>
   // you have to put an empty div inside the template, otherwise in a few cases you could have an empty template which triggers this error
  </div>
</ template>

[willin]

Faced the same problem, found a not very good solution, but as a temporary crutch can be someone help.
If you set the boot flag and change it in the creation hook, the error can be avoided.

  export default {
     data: () => ({
       loading: true
     }),
     created () {
        this.$nextTick(function () {
           this.loading = false
       })
     }
  }

<template>
   <div v-if="!loading">
    // the elements that cause the error: DOMException: Failed to execute 'appendChild' on 'Node'
  </div>
</ template>

i tried to use this... and a new error occured

b712892f66662ccef006.js:2 TypeError: Cannot read property '$scopedSlots' of undefined
    at b712892f66662ccef006.js:2
    at prepatch (b712892f66662ccef006.js:2)
    at $ (b712892f66662ccef006.js:2)
    at b712892f66662ccef006.js:2
    at $ (b712892f66662ccef006.js:2)
    at f.__patch__ (b712892f66662ccef006.js:2)
    at f.t._update (b712892f66662ccef006.js:2)
    at f.r (b712892f66662ccef006.js:2)
    at xn.get (b712892f66662ccef006.js:2)
    at xn.run (b712892f66662ccef006.js:2)
te @ b712892f66662ccef006.js:2
Zt @ b712892f66662ccef006.js:2
Yt @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
ie @ b712892f66662ccef006.js:2
Promise.then (async)
ee @ b712892f66662ccef006.js:2
ue @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
xn.update @ b712892f66662ccef006.js:2
wt.notify @ b712892f66662ccef006.js:2
set @ b712892f66662ccef006.js:2
Sn.On.set @ b712892f66662ccef006.js:2
(anonymous) @ 3649e03ce656cd477908.js:1
(anonymous) @ b712892f66662ccef006.js:2
ie @ b712892f66662ccef006.js:2
Promise.then (async)
ee @ b712892f66662ccef006.js:2
ue @ b712892f66662ccef006.js:2
t.$nextTick @ b712892f66662ccef006.js:2
created @ 3649e03ce656cd477908.js:1
Qt @ b712892f66662ccef006.js:2
fn @ b712892f66662ccef006.js:2
t._init @ b712892f66662ccef006.js:2
f @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
init @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
t._update @ b712892f66662ccef006.js:2
r @ b712892f66662ccef006.js:2
xn.get @ b712892f66662ccef006.js:2
xn @ b712892f66662ccef006.js:2
t @ b712892f66662ccef006.js:2
Pn.$mount @ b712892f66662ccef006.js:2
init @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
t._update @ b712892f66662ccef006.js:2
r @ b712892f66662ccef006.js:2
xn.get @ b712892f66662ccef006.js:2
xn @ b712892f66662ccef006.js:2
t @ b712892f66662ccef006.js:2
Pn.$mount @ b712892f66662ccef006.js:2
l @ 3649e03ce656cd477908.js:1
(anonymous) @ 3649e03ce656cd477908.js:1
d @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
t.<computed> @ b712892f66662ccef006.js:2
r @ b712892f66662ccef006.js:2
l @ b712892f66662ccef006.js:2
Promise.then (async)
r @ b712892f66662ccef006.js:2
l @ b712892f66662ccef006.js:2
Promise.then (async)
r @ b712892f66662ccef006.js:2
l @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
A @ 3649e03ce656cd477908.js:1
(anonymous) @ 3649e03ce656cd477908.js:1
Promise.then (async)
(anonymous) @ 3649e03ce656cd477908.js:1
93 @ 3649e03ce656cd477908.js:1
l @ 8173c5a8e16d1588a805.js:1
92 @ 3649e03ce656cd477908.js:1
l @ 8173c5a8e16d1588a805.js:1
r @ 8173c5a8e16d1588a805.js:1
t @ 8173c5a8e16d1588a805.js:1
(anonymous) @ 3649e03ce656cd477908.js:1
Show 21 more frames
3649e03ce656cd477908.js:1 Error: [nuxt] Error while mounting app: HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at 3649e03ce656cd477908.js:1

[willin]

@SmelayaPanda besides, by doing so, html generated nothing but a empty div...
it's very unfriendly with seo.

[rslonik]

Lost a day on this issue. In the end it was some weird problem with vuex-persistedstate, changed to vuex-persist and now v-if works as it should etc etc.

[unairubio]

Faced the same problem, found a not very good solution, but as a temporary crutch can be someone help.
If you set the boot flag and change it in the creation hook, the error can be avoided.

  export default {
     data: () => ({
       loading: true
     }),
     created () {
        this.$nextTick(function () {
           this.loading = false
       })
     }
  }

<template>
   <div v-if="!loading">
    // the elements that cause the error: DOMException: Failed to execute 'appendChild' on 'Node'
  </div>
</ template>

i tried to use this... and a new error occured

b712892f66662ccef006.js:2 TypeError: Cannot read property '$scopedSlots' of undefined
    at b712892f66662ccef006.js:2
    at prepatch (b712892f66662ccef006.js:2)
    at $ (b712892f66662ccef006.js:2)
    at b712892f66662ccef006.js:2
    at $ (b712892f66662ccef006.js:2)
    at f.__patch__ (b712892f66662ccef006.js:2)
    at f.t._update (b712892f66662ccef006.js:2)
    at f.r (b712892f66662ccef006.js:2)
    at xn.get (b712892f66662ccef006.js:2)
    at xn.run (b712892f66662ccef006.js:2)
te @ b712892f66662ccef006.js:2
Zt @ b712892f66662ccef006.js:2
Yt @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
ie @ b712892f66662ccef006.js:2
Promise.then (async)
ee @ b712892f66662ccef006.js:2
ue @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
xn.update @ b712892f66662ccef006.js:2
wt.notify @ b712892f66662ccef006.js:2
set @ b712892f66662ccef006.js:2
Sn.On.set @ b712892f66662ccef006.js:2
(anonymous) @ 3649e03ce656cd477908.js:1
(anonymous) @ b712892f66662ccef006.js:2
ie @ b712892f66662ccef006.js:2
Promise.then (async)
ee @ b712892f66662ccef006.js:2
ue @ b712892f66662ccef006.js:2
t.$nextTick @ b712892f66662ccef006.js:2
created @ 3649e03ce656cd477908.js:1
Qt @ b712892f66662ccef006.js:2
fn @ b712892f66662ccef006.js:2
t._init @ b712892f66662ccef006.js:2
f @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
init @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
t._update @ b712892f66662ccef006.js:2
r @ b712892f66662ccef006.js:2
xn.get @ b712892f66662ccef006.js:2
xn @ b712892f66662ccef006.js:2
t @ b712892f66662ccef006.js:2
Pn.$mount @ b712892f66662ccef006.js:2
init @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
P @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
t._update @ b712892f66662ccef006.js:2
r @ b712892f66662ccef006.js:2
xn.get @ b712892f66662ccef006.js:2
xn @ b712892f66662ccef006.js:2
t @ b712892f66662ccef006.js:2
Pn.$mount @ b712892f66662ccef006.js:2
l @ 3649e03ce656cd477908.js:1
(anonymous) @ 3649e03ce656cd477908.js:1
d @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
t.<computed> @ b712892f66662ccef006.js:2
r @ b712892f66662ccef006.js:2
l @ b712892f66662ccef006.js:2
Promise.then (async)
r @ b712892f66662ccef006.js:2
l @ b712892f66662ccef006.js:2
Promise.then (async)
r @ b712892f66662ccef006.js:2
l @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
(anonymous) @ b712892f66662ccef006.js:2
A @ 3649e03ce656cd477908.js:1
(anonymous) @ 3649e03ce656cd477908.js:1
Promise.then (async)
(anonymous) @ 3649e03ce656cd477908.js:1
93 @ 3649e03ce656cd477908.js:1
l @ 8173c5a8e16d1588a805.js:1
92 @ 3649e03ce656cd477908.js:1
l @ 8173c5a8e16d1588a805.js:1
r @ 8173c5a8e16d1588a805.js:1
t @ 8173c5a8e16d1588a805.js:1
(anonymous) @ 3649e03ce656cd477908.js:1
Show 21 more frames
3649e03ce656cd477908.js:1 Error: [nuxt] Error while mounting app: HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at 3649e03ce656cd477908.js:1

Same thing here. Tried to change the v-if to v-show to see if the page would mount in the background and change the status on mounted.

<div v-show="!loading" class="fill-height">
    <!-- Actual content -->
 </div>

 <div v-show="loading" class="fill-height">
    <!-- Loading spinner-->
 </div>

I can't seem to reproduce it consistently but it generally happens the first time I load after I push some large changes to production. Happens once on every device until I refresh the page. Upgraded to [email protected] and didn't help.

Any ideas?

[meteorlxy]

I struggled with this issue and found my root cause:

  export default {
     data: () => ({
       loading: true / false
     })
  }

<template>
   <div v-if="!loading">
    // the elements that cause the error: DOMException: Failed to execute 'appendChild' on 'Node'
  </div>
  <div v-else>
   // you have to put an empty div inside the template, otherwise in a few cases you could have an empty template which triggers this error
  </div>
</ template>

@CsabaSzabo I found that v-if="false" resulted in an empty comment <!----> there, which could be the reason of this error. An emtpy <div v-else> will repalce <!----> with <div></div>, and everything works well.

Maybe related to https://github.com/vuejs/vue/issues/5117

[unairubio]

Same thing here. Tried to change the v-if to v-show to see if the page would mount in the background and change the status on mounted.

<div v-show="!loading" class="fill-height">
    <!-- Actual content -->
 </div>

 <div v-show="loading" class="fill-height">
    <!-- Loading spinner-->
 </div>

I can't seem to reproduce it consistently but it generally happens the first time I load after I push some large changes to production. Happens once on every device until I refresh the page. Upgraded to [email protected] and didn't help.

Any ideas?

Got it working by replacing the v-show by v-if and smoothing the page construction with a transition.

    <transition name="fade" mode="out-in">
      <div :key="loading">
        <div v-if="!loading">
          <!-- Actual content-->
        </div>
        <div v-else>
          <!-- Loader-->
        </div>
      </div>
    </transition>

Still, this race condition seems fairly arbitrary.

[meteorlxy]

I've created a minimal reproduce repo here: https://github.com/meteorlxy/vuepress-appendchild-error

I met this problem in VuePress, but I think it's the same cause.

Here are some of the workarounds and the possible explainations:

• @unwrittenmike's workaround, changing v-if to v-show. v-show will render the element with display: none, rather than <!---->.
• @SmelayaPanda's workaround, setting the flag in created hook. created hook will be executed by server-renderer, so that it v-if block will be server-rendered, rather than <!---->.
• @CsabaSzabo's workaround, putting an empty v-else element. This will render an empty element rather than <!---->.

[icemirror]

@icemirror if u are using cloudflare u need to disable html minifcation on their side

@aldarund thanks : D, i had solved that problem

[gahabeen]

I'm having a hard time fixing this issue.

For me it appears once deployed (with nuxt build npm run build) when there is already a cached version in the browser. Once all data cleared it works like a charm 🤔

Any suggestions? Could it be because of a caching issues?

[nonsocode]

For me, the problem was caused by incorrect html nesting.

I had a component with a named slot

// custom component
<template>
  <h1>
    <slot name="title"></slot>
  </h1>
</template>

And i mistakenly nested another h1 tag within it

<custom-component>
  <h1 slot="title">This is a title</h1>
</custom-component>

To solve this, avoid illegal html syntax. Use a template or span tag in the slot instead. And avoid putting div tags within p tags.

<custom-component>
  <template slot="title">This is a title</template>
</custom-component>

[cliffordh]

no-ssr component in Vue solved this for me... just wrapped the offending code and problem gone.

[burimdervishollirrota]

For me the error was caused by the login/logout buttons on initial page load in the header components, my code was like this:
login
logout
I've change to v-if and v-else and the error is gone, So keep in mind v-if on initial page load without a v-else going to cause that error, you can also use v-show that remove the error as well.

[vcheeze]

For me, it seems to be caused by the <div id="__layout"></div> tag that nuxt inserts by default. I was trying to remove everything from the generated HTML and put the code back bit by bit, but as soon as I hit the second div tag, the error popped up.

Changing from this

<div data-server-rendered="true" id="__nuxt">
</div>

to this

<div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
    </div>
</div>

causes the error. Any ideas why? I don't even have v-if in my code.

[jimmerydad]

no-ssr component in Vue solved this for me... just wrapped the offending code and problem gone.

For nuxt 2.9+ needed to use client-only, this helped

[gahabeen]

I had several times the same issue and it resulted in the fact that I had a v-if and a v-show on the same element. Hadn't noticed because the implementation came from part of a template I used.

Anyway, careful with your v-if in general. I always add an empty div with a v-else when I use it too in order to avoid any issue lik "appendChild node".

[yamenshahin]

I have the same issue.
Wrapv-if inside no-ssr work. But because of this I wrapped a great part of my code.
So what is the point of using nuxt ssr?

[binaryk]

Fuck it, v-if replaced with v-show fixed.

[isokosan]

For me as many others, this is only happening on my production machine with nuxt generate - I can't debug it on my local machine. It's taking ages for the generate command to complete. I'm going nuts! Hope we get an easier way to avoid this in the future releases of nuxt.

[codeofsumit]

I'm also getting this error with nuxt generate. I can reproduce it locally when building and serving the dist folder.
Unfortunately I can't reproduce this on the dev server so it's reeaaaaally hard to debug.

Does anyone have a clue how to narrow down the nodes that are causing this?

[codeofsumit]

Wrapping the entire nav in <no-ssr> fixed it for me: https://github.com/nuxt/nuxt.js/issues/1552#issuecomment-425075526

Weird - only made it through trial and error for about 3 hours, but ok.

[manniL]

A small guide on how to deal with this error (result of failing hydration)

[tommcclean]

I am using npx create-nuxt-app and then I can run the site using npm run dev, however as soon as I use npm run generate with the complete vanilla default nuxt website, it doesn't work when I open the index.html in the browser :(

Probably on my 12th hour of trying everything on the web, anybody got any ideas?

I can actually delete all of the markup and its still broken with the same JS error

[azarai]

Run into the same problem. In my case, it was a form using Netlify forms. It was detected by Netlifys' deploy logic and enhanced plus a hidden field was updated. As this was not present during Nuxt generation, Nuxt failed at processing the form's HTML. My workaround was adding this hidden field directly in my code, and then the prob was gone.

[Spiegel1039]

same error(npm run build+npm start). After signing in, none of the pages work.Even if you refresh the current authenticated home page, it does'nt work and gives the same error.Everything works in local though.
Now wrapping the bootstrap nav component with <client-only> does remove this error but the effect remains the same. When i try to access protected pages even after authentication, i am redirected back to signin.

[Spiegel1039]

setting the login property under redirect to false in nuxt.config.js solved the error in my case.
I must say the docs were a bit misleading.

[tommcclean]

I have found another potential solution. I was using generate, then using the markup provided in another existing web based system. I find that it only works if you host the output HTML on the same route for which it was generated. So if you use it on profile/info in your other website, you need to use the same route in Nuxt for it to work.

[DanFaudemer]

This error can be really painfull to debug. In order to quickly get the element causing an issue edit node_modules/vue/dist/vue.esm.js and add the following lines :

// Search for this line: 
function hydrate (elm, vnode, insertedVnodeQueue, inVPre) {
    var i;
    var tag = vnode.tag;
    var data = vnode.data;
    var children = vnode.children;
    inVPre = inVPre || (data && data.pre);
    vnode.elm = elm;

    // Add the following lines: 
    console.log('elm', elm)
    console.log('vnode', vnode)
    console.log('inVpre', inVPre)
    // ...

You will get in the console the failing node.

[Uzwername]

I had a similar issue, that was happening due to v-if, v-else. I changed both to v-show & it resolved the issue.
However, the pattern that created the problem is rather common, so it'd be really nice to know how to handle such situations properly.

Consider you have 2 menus, one for desktop version & another for mobile version inside some controller:

<template>
    <div>
        <!-- Only 1 version of nav should be displayed depending on screen size -->
        <TheDesktopNavigation v-if="isDesktop" />
        <TheMobileNavigation v-else :open="isMobileMenuOpen" />
    </div>
</template>

My isDesktop initially was something like this:

methods: {
    isDesktop() {
        return window.matchMedia('(min-width: 768px)').matches
    }
}

however, Nuxt reasonably complained that it cannot find any window object in Node.js environment, so, I had to re-write the method like this:

methods: {
    isDesktop() {
        if (process.client) {
            return window.matchMedia('(min-width: 768px)').matches
        }
        return false
    }
}

Now there's obviously a mismatch between server-side rendered version & client-side rendered version, since only TheMobileNavigation is always rendered on server.

The best solution here is probably to wrap it in <client-only>. However, in this particular case it could greatly affect SEO. Is there any kind of common workaround for that?

[deeja]

For some reason <li> doesn't seem to support v-if on hydration after a nuxt generate.
It works when running SPA or Universal.
Error has gone away after I removed the
<li v-if="myObj.myStringProperty">{{myObj.myStringProperty}}</li>
For reference, this is what I was seeing:

[jonathanmach]

Run into the same problem. In my case, it was a form using Netlify forms. It was detected by Netlifys' deploy logic and enhanced plus a hidden field was updated. As this was not present during Nuxt generation, Nuxt failed at processing the form's HTML. My workaround was adding this hidden field directly in my code, and then the prob was gone.

I'm running into the same problem due to Netlify Forms. However, adding the hidden field directly in my code hasn't solve my problem.

[NWRichmond]

Run into the same problem. In my case, it was a form using Netlify forms. It was detected by Netlifys' deploy logic and enhanced plus a hidden field was updated. As this was not present during Nuxt generation, Nuxt failed at processing the form's HTML. My workaround was adding this hidden field directly in my code, and then the prob was gone.

I'm running into the same problem due to Netlify Forms. However, adding the hidden field directly in my code hasn't solve my problem.

I was running into the same problem when deploying on a statically-generated Nuxt app on Netlify, even though I wasn't using Netlify Forms. I suspect it's because of the way Netlify transforms html during the deploy step. There were no issues when the site was statically built and served somewhere other than Netlify.

I worked around this issue by wrapping the offending <form>-containing component with <client only></client-only>.

[samneng]

Run into the same problem. In my case, it was a form using Netlify forms. It was detected by Netlifys' deploy logic and enhanced plus a hidden field was updated. As this was not present during Nuxt generation, Nuxt failed at processing the form's HTML. My workaround was adding this hidden field directly in my code, and then the prob was gone.

I'm running into the same problem due to Netlify Forms. However, adding the hidden field directly in my code hasn't solve my problem.

I was running into the same problem when deploying on a statically-generated Nuxt app on Netlify, even though I wasn't using Netlify Forms. I suspect it's because of the way Netlify transforms html during the deploy step. There were no issues when the site was statically built and served somewhere other than Netlify.

I worked around this issue by wrapping the offending <form>-containing component with <client only></client-only>.

Nice @NWRichmond , You saved my mid-night work.
I have add <clent-only> wrapping the <form> and It's work fine for me.

[manniL]

Locking here as explained in https://github.com/nuxt/nuxt.js/issues/5800#issuecomment-634514110.

Closing here as there are a couple of reasons why the state of the HTML and the state of the client are out of sync and there isn't much we can do against that right now besides debugging. The error is most likely related to Vue Hydration failing and tough to spot.

A few of the error source have been mentioned throughout this issue, others can be found in this blog post.

Feel free to investigate further but from the side of the core team there isn't much to "solve".

Vue3 will bring improved hydration and hopefully also improvements in this area ☺️