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

[Luxiaoshi]

• [ ] 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

[MaxHershey]

I'm getting the same issue. It appears to be related to the SearchBox Component perhaps?

[Luxiaoshi]

I have resolved this question, which i have wrong nginx config.

[MaxHershey]

I have resolved this question, which i have wrong nginx config.

Do you mind me asking what the config issue was?

[busyrat]

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
  }

[hugojing]

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.

[agrass-GitHub]

how to solve problems ?

[thaycacac]

I had the same problem.

[cwaring]

I also noticed this issue appear once I enabled the PWA plugin, so it may be related to the caching. If I find the root cause I'll report back here.

[haoranpb]

Can anyone who encounters this problem build a minimal reproduction?

Or describe how to reproduce the problem?

[hugojing]

Can anyone who encounters this problem build a minimal reproduction?

Or describe how to reproduce the problem?

You can see this: https://douweimusic.com/albums/

Code repo: https://github.com/hugojing/douwei-music

[haoranpb]

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.

[binnymaster]

Hey I'm also getting same error, My application is based on vue.js

[lucduong]

@Luxiaoshi Could you share the nginx config? I got the same error and figured out it related to nginx. But Don't know how to fix this.

[rwpswami]

I am still getting this issue. Anybody got solution on this?

[mashpie]

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

[gcharang]

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

[vikrantmagare6]

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

I also have same issue in my case it on v-html example :

so I just wrap it it resolve

[vikrantmagare6]

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>

[beMySun]

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

YES, it works ! 💗

[kane50613]

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]

still having the problem

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

resolved, same as nuxt/nuxt.js#1552 disable cloudflare auto minify worked for me

[huangzonggui]

When I wrote a typo on the header of document, the development environment was normal, but the error burst after deployment

[beMySun]

Hello!  Your E-mail has been recieved and I will respond you as soon as possible.Best wishes! 

[bit15k]

我也遇到了

[FanSirSan]

nginx

try_files $uri $uri/ /index.html;

[littlegreay]

how to solve the problem，it does not solve the problem

[littlegreay]

no

[ctrlaltdylan]

Just adding to this thread, I'm experiencing this same issue with Vercel as the host.

However, it's very strange, I have run the build locally with a simple express server:

import express from "express";
const app = express();

app.use("/", express.static("docs/.vuepress/dist"));

app.listen(8000);

And the site works completely fine.

It's only on Vercel preview deployments where this bug occurs. And it's only on page refreshes, not on initial load.

There's no server side components running on the site, and the enhanceApp.js was fully commented out as a test, no change.

Will report back when I learn more.

[oleksandr-dukhovnyy]

Carefully check your syntax in MD files and the correctness of the names of the values in the configuration. If there are errors in the MD and configuration, the build proceeds normally, without errors, but the build contains errors that cause this exception. In my case, I had the wrong path in config.js > themeConfig > logo

[cyanar]

I have resolved this problem. In my case I change the syntax in the related makdown file and it works

[beMySun]

Hello!  Your E-mail has been recieved and I will respond you as soon as possible.Best wishes! 

[PowersYang]

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;
}