VuePress deployment on Netlify succeeds, but experience errors when reloading specific pages

Support
, , ,
#1

Hi, I have a VuePress generated static website deployed on Netlify, I am currently running into errors like:

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

only when reloading inner pages (i.e, not homepage.).

I have searched for similar issues on GitHub and it seems that it is related to Vue’s failing hydration as described here: nuxt.js/issues/1552, and here: vuepress/issues/1692.

However, I didn’t come across these issues when I’m in my local environment (both in dev mode and in production mode), I only run into these issues when I deploy my site to Netlify. Confusing…

I have prepared an example of this problem on this pull request of my site: dowww/pull/54, source code on this branch: dowww/tree/fix-versioning, and the corresponding deployed Netlify instance is at: deploy-preview-54–dowww. To reproduce the problem, simply open this link directly: https://deploy-preview-54--dowww.netlify.app/1.1/4-Advanced/4-2-LxRunOffline.html, or go into any one of the inner pages and reload, and you can see the issue popping up in the console:

image
image1909×609 140 KB

To assure you that this issue is not met in local environments, you can verify by cloning the branch mentioned above, and run yarn docs:dev for dev mode. For development mode, you can run yarn docs:build and go into the built static site folder docs/.vuepress/dist and run a http server with python3 -m http.server.

As the deployed version on Netlify is in production mode, it’s very hard to debug the issue. Thanks for all the help!

#2

@divya said she’d take a look tomorrow, thanks divya!

1 Like
#3

Thank you @perry and @divya for all the help!

#4

Hi @spencerwooo,

I tried replicating the error by cloning your repo and redeploying to my own account. I can see the issue you’re having, and to be honest, I’m not sure what exactly is causing this issue. My guess off the cuff is that Vuepress is having issues with how you’ve organized your theme config, and may be trying to append to an element that doesn’t exist or doesn’t support the appendChild method; this is probably getting noticed only on refresh and not on initial load.

If this is a huge concern, I would try cloning the default vuepress theme into your repo and tweaking it so that you can handle this error.

I apologize for not having a better answer to this! But I’d love to know what worked if you figure this out!

Divya

2 Likes
#5

Thank you so much for the suggestions @divya !

I was wondering if Netlify did some undocumented post-deploy optimizations under the hood? (HTML/CSS/JS minify, or white-space compressions?) Because this error only occurred on Netlify deploys and not on local environments (not even when I built static files for production and served them with a HTTP server).

I guess I could live with this error, but it’s really annoying when someone posts a direct link to one of my site’s inner pages, and when they go straight to that page, they can’t click on the sidebar TOC to navigate.

Also (and I think this is really important), I did some personal tweaks to my VuePress site in order to enable documentation versioning (something not available yet to the default build of VuePress). I basically grabbed what php-lighthouse did to their docs site and added the same code and same config to my site. I can see that their site (which is also deployed on Netlify) is doing just fine, not running into errors like mine, so I think this method is totally viable.

Some more relevant info:

1 Like
#6

We do have asset optimization features but those are on an opt in basis. If you did not enable them, we won’t perform those optimizations. Could you check your site’s deploy settings to make sure you don’t have any of these features enabled?

#7

Nope, nothing is enabled inside post processing.

image
image954×845 26.8 KB

#8

So…kind of awkward. I deployed the same repo on Vercel (formerly ZEIT) to see if anything weird happens too, and it turns out…nothing happened! You can go see the site to verify: https://dowww.now.sh

Opening one of the inner pages directly (for instance: https://dowww.now.sh/1.1/4-Advanced/4-2-LxRunOffline.html) shows no errors inside the console, and I can also click on the sidebar to navigate! Weird!

image
image1285×730 50.4 KB

I was wondering if there’s a way to force-delete all my build cache and do a 100% complete rebuild of my site on Netlify without me deleting and re-importing my site? (You guys have awesome load time in China and I don’t want to make the switch to be honest.) Thanks for all the help and for hosting all (literally all! :joy:) my websites!

#9

@divya New update! So I converted all of my file names and directory names to lowercase and it actually solved the problem! Wow, I guess Netlify’s 301ing all requests for URLs with uppercases inside them actually broke VuePress. So…I guess this is fixed. Thanks for everything!

1 Like
#10

wow, thanks for posting the solution! I’m glad its fixed!

1 Like
#11

This is so so awesome! So glad you found a fix, and thanks for the update! :tada::tada::tada:

1 Like