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 mand).
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: 'mon.mixing', icon: 'insert_chart', id: 'mixing'},
{name: 'mon.mastering', icon: 'disc_full', id: 'mastering'},
{name: 'mon.promotion', icon: 'radio', id: 'promotion'},
{name: 'mon.photograph', icon: 'photo', id: 'photograph'},
{name: 'mon.rehearsal', icon: 'tune', id: 'rehearsal'},
{name: 'mon.graphics', icon: 'perm_media', id: 'graphics'},
{name: 'mon.website', icon: 'web', id: 'website'},
{name: 'mon.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: ':300,400,500,700|Material+Icons' }
]
},
modules: ['nuxtjs-dotenv-module'],
plugins: [
'~/plugins/vuetify.js',
{ src: '~/plugins/vuetify-google-autoplete.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-autoplete',
'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-autoplete/,
/^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-piler": "2.5.16",
"vuelidate": "^0.6.2",
"vuetify": "^1.1.8",
"vuetify-cloudinary-upload": "^0.1.1",
"vuetify-google-autoplete": "^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
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 mand).
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: 'mon.mixing', icon: 'insert_chart', id: 'mixing'},
{name: 'mon.mastering', icon: 'disc_full', id: 'mastering'},
{name: 'mon.promotion', icon: 'radio', id: 'promotion'},
{name: 'mon.photograph', icon: 'photo', id: 'photograph'},
{name: 'mon.rehearsal', icon: 'tune', id: 'rehearsal'},
{name: 'mon.graphics', icon: 'perm_media', id: 'graphics'},
{name: 'mon.website', icon: 'web', id: 'website'},
{name: 'mon.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./css?family=Roboto:300,400,500,700|Material+Icons' }
]
},
modules: ['nuxtjs-dotenv-module'],
plugins: [
'~/plugins/vuetify.js',
{ src: '~/plugins/vuetify-google-autoplete.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-autoplete',
'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-autoplete/,
/^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-piler": "2.5.16",
"vuelidate": "^0.6.2",
"vuetify": "^1.1.8",
"vuetify-cloudinary-upload": "^0.1.1",
"vuetify-google-autoplete": "^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
Share Improve this question edited Jul 25, 2018 at 18:18 Dario Rusignuolo asked Jul 25, 2018 at 16:28 Dario RusignuoloDario Rusignuolo 2,1867 gold badges38 silver badges68 bronze badges 1- did you find the solution? – soha1410 Commented Aug 24, 2019 at 7:24
3 Answers
Reset to default 5If you are using a version of Nuxt < v2.9.0, use <no-ssr> Otherwise wrap the ponents 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>
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 ponent. The TopNavbar ponent is loaded in default layout. I put the TopNavbar in no-ssr like:
<no-ssr>
<TopNavbar/>
</no-ssr>
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