Hydration error: Cannot read properties of null (reading 'nextSibling') – fixed by disabling mod_pagespeed

Hi everyone,

I wanted to share a problem I ran into when deploying my WeWeb site on Hetzner web hosting (self hosting) , in case it helps others.

When I deployed, the site would crash in the console with this error:

main-B1R437D4.js:20 Uncaught (in promise) TypeError:
Cannot read properties of null (reading ‘nextSibling’)

At first I thought it was an issue with my pages icons and what not, but I reproduced it even on a test page with only a single header. That made me suspect a hydration mismatch (Vue trying to hydrate an empty container).

After some testing I discovered the cause: the compiled code ran Google mod_pagespeed by default, which rewrites the HTML and JS. If I added ?ModPagespeed=off to the URL, the page loaded perfectly.

Solution:
I added this to my .htaccess file in the web root to disable PageSpeed

<IfModule pagespeed_module>
  ModPagespeed off
</IfModule>

I also added custom error handling:

ErrorDocument 403 /404/index.html
ErrorDocument 404 /404/index.html

After that, hydration errors disappeared and everything works fine.

Hope this helps someone else who deploys to hosts that inject PageSpeed or other HTML rewriters. The crash isn’t in WeWeb compiling, but the runtime hydration gets confused when the server has altered the prerendered output.

2 Likes

Hi Mathias :waving_hand:

Thanks a lot for sharing your solution!