gridsome: Failed to execute 'appendChild' on 'Node'

I think I’ve just figured this out actually, the only thing I could think of was a share button that is only enabled if the browser supports the navigator.share API. I check for this in my main.js file:

export default (Vue, {router, head, isClient}) => {
    Vue.prototype.$sharingEnabled = isClient && !!navigator.share;
    ...

and then use it in my templates like so:

<button class="uk-button uk-button-primary" v-if="$sharingEnabled" @click.prevent="sharePost">
    <i class="fab fa-share"></i>
    Share
</button>

I’ve just changed the v-if to v-show, and it’s solved the issue. My only guess is that because the v-if removes the element during SSR, it can’t be hydrated during the client side render, causing the issue? Would this make sense?

For others that are having a similar issue, I was having the same error in sentry.io reports. It turned out to be that I had a computed property called gpsAvailable and was doing a v-if="gpsAvailable" in my template, I changed it to v-show="gpsAvailable" and that fixed it. apparently something to do with SSR re-hydration. Other googling lead me to similar things all dealing with newer browser API’s like location or websharing etc or malformed HTML.

computed: {
gpsAvailable() {
     if(process.isClient && typeof window !== 'undefined' && typeof window.navigator !== 'undefined'){
        return navigator.geolocation ? true : false;
      }else{
        return false;
      }
    }
}

@LorenAmelang The problem here is that the post content is wrapped in a paragraph. That will make the generated HTML invalid if it contains any block elements (h1, ul etc.). Changing it to <div v-html="$page.post.content" /> should help.

Same problem, same solution as @MFukazawa , had a <p v-html=""> changed it to a DIV tag and that was it. Hard to find though …

Another instance where I’ve seen this error appear (just spent 2 hours debugging it 🤕) is if you have a <noscript> tag anywhere in your site. After I removed them and replaced them with v-ifs and a variable to see if a component has been mounted or not the error went away.

Hi @platform-kit!

Did you follow the debugging steps listed in this thread? The main cases of this error we’ve seen so far are:

1. Including a <noscript> tag - a <noscript> tag anywhere in your project could cause this
2. Adding HTML to an inline element - using the v-html directive on a <p> tag instead of a <div> tag could cause this, for example
3. Using v-if - If you’re using the v-if directive instead of v-show, this can sometimes cause this issue. If it’s possible to use v-show, give that a try.

Am I missing anything here folks? If none of these solve your problem, could you post a link to your repository?

@cossssmin You could check out the headings field for markdown nodes. It will generate a list of headings for you.

Is there a way to make the error message more helpful for this? I’ve run into this at the wrong time, unfortunately

@hacknug Yup and that made no difference on the g-image tag I had.

I did see those ideas and none of them fixed the issue. For now, wrapping my entire layout in client-only has done the trick.

I’ve been running into this on build when deploying to Netlify (not in local dev).

Here’s the error message in the latest Chrome, running Gridsome 0.7.13

Uncaught (in promise) DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method. at Object.appendChild (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:40605) at h (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:53337) at d (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:53074) at p (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:53423) at k (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:56761) at k (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:56696) at k (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:56696) at k (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:56696) at k (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:56696) at k (https://www.dharmaworks.com/assets/js/app.af37cffe.js:7:56696)

I don’t have a clue as to how to debug this. Any pointers would be appreciated.

@badrihippo @weaversam8 @Tummerhore I don’t think Vue has support for <noscript> tags. I had the same problem when making the <g-image> component. It renders a fallback image in a <noscript> tag and I had to insert the fallback image as an HTML string to make it work (see here). I haven’t tested, but <noscript v-html="..." /> might work too.

Should open new issue/bug report for this?

@badrihippo - so far this issue is okay for recognizing and preventing the behavior, but if you want to open a new issue specifically targeting Gridsome’s lack of <noscript> support, that wouldn’t be a bad idea.

I’ve tried replacing v-if with v-show but I’m still getting this error. I’m not using any new browser APIs, and it’s happening in Firefox as well but with a slightly different message: HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy. Here’s a deployment: https://5da7f5945b97a30008b6c5be--macguire.netlify.com/

Any ideas?

Edit: The issue was Netlify forms. Found the solution via #361 (not having a certain hidden input seems to be the problem — see here for the solution)