Nuxt.js: nuxt generate page error

[mojereliev]

Hi
Nuxt generate is amazing, but i have strange problem:
first generate page (time to time is differ) has [nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
In project i use nuxtServerInit in store and axios for fetch common data.

Generation of dynamic routes with asyncData working nice, but this error is breaking my mind...

Has anyone encountered such a problem? I will be grateful for the help, thanks.

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

[clarkdo]

You can have l look at: https://github.com/nuxt/nuxt.js/issues/1552#issuecomment-341729165

[mojereliev]

Yes, but this not solve the problem. I wrote this in comment at #1552 issue

[clarkdo]

Sorry for my late response, could you please have a try on nuxt@next to test if it can reproduce in the latest codes of nuxt ?

[mojereliev]

Same error with [email protected]

[clarkdo]

Can you provide a repo which can reproduce the issue?

[mojereliev]

Hi, I made the cut-down version of the repository with the same error. In the process, I found the cause of the error in my project: deleting this.app.uiColor in https://github.com/mojereliev/nuxt-project-template/blob/develop/layouts/default/default.js#L59 helps, but I do not understand why. Now there are three routes: /, about/, contact/, but only one fails. I saw my mistake in other issues, I think they have a common cause. I will be very grateful for the explanation of this.
In any case, many thanks for your help.

[clarkdo]

The error actually should occur in every route.

The reason only one error is that your store was kept in node require cache, so only first generated route had the error.

You can refer to https://github.com/nuxt/nuxt.js/issues/2308#issuecomment-349526029.

The issue is related to Vuex, jus same like:
https://github.com/vuejs/vuex/issues/877#issuecomment-334842553
https://github.com/vuejs/vuex/issues/978

We will try to figure out appropriate way to solve it asap.

[clarkdo]

@mojereliev

We have some suggestions about this issue for you to fix the problem.

Fo example:

In contact.js, you are using created to set store state which will be executed in both server and client side, we recommend you to use fech to set the data, maybe sth like:

  // Run by nuxt.js on server-side
  // And only when navigating to this page on client-side
  fetch({ store }) {
    store.commit('setUiColor', 'black')
  },

[mojereliev]

Thank you, this option corrects the error!

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