vuepress: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

Output of npx vuepress info in my VuePress project:

When I develop my docs in development environment, it is ok. When i build it and put it on my server with nginx, it is also ok. However when i refresh the page with routes like this http://xxx.com/develop It has the error below

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 13
Comments: 32 (2 by maintainers)

Commits related to this issue

:bug: Fix DOM updates from v-if Using vuetify breakpoints in v-if makes the component dynamic, which causes a DOM exception. See: https://github.com/vuejs/vuepress/issues/1692. — committed to gundamMC/blog by gundamMC 4 years ago
fix: Vue hydration fails Failed to execute 'appendChild' on 'Node' https://github.com/vuejs/vuepress/issues/1692 — committed to Swedish-li/Swedish-li.github.io by Swedish-li 4 years ago
Fixed bug - https://github.com/vuejs/vuepress/issues/1692 — committed to eliot-ye/vuepress-theme-blog-official-style by eliot-ye a year ago

Most upvoted comments

Just a hint: Another common mistake is to use dynamic vue components that should render client side but forget to ignore them in static builds… 99% of those issues in our projects were missing <ClientOnly>. So try:

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>

and read https://vuepress.vuejs.org/guide/using-vue.html

mashpie on May 22, 2020

still having the problem

but it only happened when it deploy to production enviorement I didnt get any error when running in local enviorement

kane50613 on Sep 21, 2021

I had the same problem, and then I found out it had to do with document

enhanceApp.js
  if (typeof window !== 'undefined') { // add this line
    window.document.xxx
  }

I have no enhanceApp.js file and no nginx, but still have this issue.

hugojing on Aug 19, 2019

I solved this question by change nginx config from try_files $uri /index.html to try_files $uri $uri/ /index.html. Final results like:

server {
    # omit
    # try_files $uri /index.html;
    try_files $uri $uri/ /index.html;
}

PowersYang on Sep 19, 2023

nginx

try_files $uri $uri/ /index.html;

FanSirSan on Feb 17, 2022

I also have same issue in my case it on v-html example : <p v-html=“item.description”>

so I just wrap it it resolve <client-only> <p v-html="item.description"></p> </client-only>

vikrantmagare6 on Jul 3, 2020

Leaving a comment here in case someone else made the same mistake as me. Using an XML comment like:  inside a markdown table in a .md file used by Vuepress causes this error as well

gcharang on Jun 5, 2020

Thx for your repo @hugojing ,

In your case, simply change all of the [<h2>***</h2>](***) into ## [***](***) will solve the problem.

I don’t know if others are suffering from this problem because of the similar reason, but I suggest you all double check your HTML syntax in your corresponding page.

If anyone still can’t fix this problem, pls provide a minimal reproduction or describe how to reproduce the problem.

haoranpb on Nov 18, 2019