Home

Issue: 1248

asyncData promise resolve order and conditional DOM element results in DOMException: Failed to execute 'appendChild' on 'Node'

[issue link]

I thought I’d open a new issue opposed to this issue that’s closed: https://github.com/nuxt/nuxt.js/issues/1214

The original problem isn’t really as described once I drilled down.

Replication: https://github.com/silverbackdan/v-if-nuxt

The repo outlines an issue where there is a shared import between a parent and child. The parent’s asyncData resolves after the child’s - this causes an issue where the child is using a v-if attribute (on it’s own data).

All is OK when running in development mode. The issue arises after a build and running in production.

Steps to reproduce with the repo:

The error in the console

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

Main code in repo to note:

Forcing parent data to populate later than child:
https://github.com/silverbackdan/v-if-nuxt/blob/master/plugins/page.js#L3

The element using v-if that triggers the issue:
https://github.com/silverbackdan/v-if-nuxt/blob/master/pages/index/_news.vue#L5

This is to simulate an ajax call where the data for a parent page may take longer to load than the child. Website where this is happening: https://demo.starter.b-w.uk/news/August-2017/my-1st-news-post

This question is available on Nuxt.js community (#c1103)