nuxt generate: Failed to execute 'appendChild' on 'Node'

Question

I'm using nuxt a lot. It's a very powerful framework, but recently I can't get it to work (even after 3 months of generating static webpages). The problem I'm getting is only when I generate the site (using the nuxt generate command). That's the error I get from the browser. ( Everything works fine with the hot-reloading environment )

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

The vue template is as follows

<v-container grid-list-md class="mt50 mb50" id="services">
  <h1 class="text-center">
    {{$t('index.services')}}
  </h1>
  <v-layout row wrap>
    <v-flex xs12 lg3 sm6 md4 :key="k" v-for="(service, k) in services">
      <v-card height="40">
        <v-card-title> 
          <v-icon>{{service.icon}}</v-icon> {{$t(service.name)}}
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

and that's the services var

[
    {name: 'common.mixing', icon: 'insert_chart', id: 'mixing'},
    {name: 'common.mastering', icon: 'disc_full', id: 'mastering'},
    {name: 'common.promotion', icon: 'radio', id: 'promotion'},
    {name: 'common.photograph', icon: 'photo', id: 'photograph'},
    {name: 'common.rehearsal', icon: 'tune', id: 'rehearsal'},
    {name: 'common.graphics', icon: 'perm_media', id: 'graphics'},
    {name: 'common.website', icon: 'web', id: 'website'},
    {name: 'common.videoclip', icon: 'videocam', id: 'videoclip'}
  ]

I know that this part breakes everything because of the image below, that is the output I get (that breakes also all the logic javascripts of the app). This image shows the bottom of the <nuxt /> section of the app.

I know there's some open issues here here here here here here here and here. Tried everything said on those linkgs, but nothing helped me to solve the issue. The problem still persist.

Here's my nuxt.config.js (or a portion of it)

const nodeExternals = require('webpack-node-externals') const axios = require('axios')

module.exports = {
  head: {
    title: 'Website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: "" }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/css/fonts.css' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
    ]
  },
  modules: ['nuxtjs-dotenv-module'],
  plugins: [
    '~/plugins/vuetify.js',
    { src: '~/plugins/vuetify-google-autocomplete.js', ssr: false },
    { src: '~/plugins/vue-masonry.js', ssr: false },
    { src: '~/plugins/stripe.js', ssr: false, injectAs: 'socialAuth' },
    { src: '~/plugins/ga.js', ssr: false },
    { src: '~/plugins/google.js', ssr: false, injectAs: 'googleAuth' },
    '~/plugins/global.js',
    '~/plugins/i18n.js'
  ],
  css: [
    '~/assets/style/app.styl'
  ],
  router: {middleware : 'i18n'},
  loading: { color: 'orange' },
  generate: {
    gzip: true,
    minify: {
      collapseWhitespace: true
    },
    interval: 1,
    routes: function () {
      [...]
      let rooms = axios.get(domain + '/nuxt/rooms').then((res) => {
        if(res && res.data.length){
          return res.data.map((room) => {
            return '/manage/pro/room/' + room._id
          })
        }else{
          return []
        }
      }).catch(response => {
      });
      let bookings = axios.get(domain + '/nuxt/users').then((res) => {
        if(res && res.data.length){
          return res.data.map((user) => {
            return '/bookings/' + user.slug
          })
        }else {
          return []
        }
      }).catch(response => {
      });
      let user = axios.get(domain + '/nuxt/users').then((res) => {
        if(res && res.data.length){
          return res.data.map((user) => {
            return '/user/' + user._id + '/' + user.username
          })
        }else {
          return []
        }
      }).catch(response => {
      });
      let posts = axios.get(domain + '/nuxt/posts').then((res) => {
        if(res && res.data.length){
          return res.data.map((post) => {
            return '/post/' + post._id
          })
        }else {
          return []
        }
      }).catch(response => {
      });
      return Promise.all([rooms, posts, user, bookings]).then(values => {
        return values.join().split(',');
      })
    }
  },
  build: {
    vendor: [
      'vue-i18n',
      'v-img',
      'axios',
      'vue-masonry-css',
      'vue-awesome',
      'vuetify-google-autocomplete',
      'nuxt-dropzone',
      'v-infinite-scroll',
      'vue-icons'
    ],
    extend (config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [
              /^vue-awesome/,
              /^vue-masonry-css/,
              /^vuetify-google-autocomplete/,
              /^v-infinite-scroll/,
              /^vue-icons/
            ]
          })
        ]
      }
    }
  },
  env: {
    NUXT_ENV: process.env.NUXT_ENV
  }
}

and my package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "author": "Dario",
  "private": true,
  "scripts": {
    "dev": "NODE_ENV=dev CUSTOM_ENV=dev NUXT_ENV=dev nuxt",
    "local": "NODE_ENV=local CUSTOM_ENV=local NUXT_ENV=local nuxt",
    "build": "NODE_ENV=local CUSTOM_ENV=local NUXT_ENV=local nuxt build",
    "start": "NODE_ENV=local CUSTOM_ENV=local NUXT_ENV=local nuxt start",
    "generate": "NUXT_ENV=prod nuxt generate",
    "generate-dev": "NUXT_ENV=dev nuxt generate"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-runtime": "^6.26.0",
    "body-parser": "^1.18.3",
    "bulma": "^0.5.1",
    "callback-loader": "^0.2.4",
    "dotenv": "^5.0.1",
    "express": "^4.16.3",
    "express-session": "^1.15.3",
    "form-data": "^2.3.2",
    "fs": "0.0.1-security",
    "link-prevue": "^1.1.3",
    "nuxt": "^1.4.1",
    "nuxt-dropzone": "^0.2.7",
    "nuxtjs-dotenv-module": "^1.0.0",
    "regenerator-runtime": "^0.12.0",
    "v-img": "^0.2.0",
    "v-infinite-scroll": "^1.0.4",
    "vue": "^2.5.16",
    "vue-authenticate-clone": "^1.3.7",
    "vue-awesome": "^2.3.8",
    "vue-axios": "^2.1.2",
    "vue-google-authentication": "*",
    "vue-i18n": "^7.8.1",
    "vue-icons": "^2.0.0",
    "vue-infinite-scroll": "^2.0.2",
    "vue-masonry-css": "^1.0.2",
    "vue-passport": "^1.0.13",
    "vue-server-renderer": "2.5.16",
    "vue-stripe-checkout": "^1.0.8",
    "vue-template-compiler": "2.5.16",
    "vuelidate": "^0.6.2",
    "vuetify": "^1.1.8",
    "vuetify-cloudinary-upload": "^0.1.1",
    "vuetify-google-autocomplete": "^2.0.0-beta.4",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.1.1",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.8.0",
    "eslint-plugin-standard": "^3.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }
}

UPDATE

I tried to redirect the first page after it mounted. It shows the images below

and in console I got

Answer 1

In my case I was setting a variable in beforeMount() and I had to move it to mounted()

<template>
  <div v-if="visible">
   ...
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  beforeMount() {
    // this.visible = true;
  },
  mounted() {
    this.visible = true;
  }
}
</script>

Also the error is a bit different in Firefox: nuxt DOMException: Node.appendChild: Cannot add children to a Comment

Answer 2

If you are using a version of Nuxt < v2.9.0, use <no-ssr> Otherwise wrap the components or the pages with <client-only></client-only>. That will solve the problem.

<template>
   <div>
      <client-only>
         <h1>This is a nuxt page</h1>
      </client-only>
   </div>
</template>

Answer 3

use no-ssr which part throws that exception. generally if you have v-if v-else block, it throws that exception.

In my case I have v-if v-else in TopNavbar component. The TopNavbar component is loaded in default layout. I put the TopNavbar in no-ssr like:

<no-ssr> 
 <TopNavbar/> 
</no-ssr>