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

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>

#1552

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

@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

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
  }
}

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

    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.

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

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

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

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

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

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.

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

@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>
</ul>

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

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?

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>

@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

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.

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.

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.

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.

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

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.

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

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?

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

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.

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.

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

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