Hydration completed but contains mismatches

ak-tr commented 8 months ago

Describe the bug

If I go to my project home and click on the link to a post, I am able to access the post. If I go to a direct link to a post, or I refresh my page while on a post I will get the "Hydration completed but contains mismatches" in the console and the page goes blank.

Reproduction

I have included the source code at https://github.com/ak-tr/blog.akif.kr/tree/main The website is also deployed to Firebase Hosting at https://blog.akif.kr

To reproduce, go to https://blog.akif.kr, and click on the first (and only) post. There are no issues. Now refresh, and you will get the said error.

Expected behavior

Post loads on refresh or on when accessed directly.

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 126.19 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - ~/.nvm/versions/node/v20.5.0/bin/node
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.0/bin/npm
  Browsers:
    Chrome: 121.0.6167.160
    Safari: 17.0
  npmPackages:
    vitepress: ^1.0.0-rc.40 => 1.0.0-rc.42

Additional context

I do use Cloudflare and have disabled minification for all files on that domain. I have purged all the cache and it has been over 18 hours since I made the change so even if the purge didn't work for whatever reason, I assume the cache would've died by now.

Validations

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 8 months ago

Seems like you've enabled cleanUrls but haven't added rewrite rules on cloudflare.

ak-tr commented 8 months ago

It was actually Firebase causing the issue not Cloudflare, but thank you for pointing me in the right direction.

I added the cleanUrls option to my firebase.json file, and it has solved the issue.

{
    "hosting": {
        ...
        "cleanUrls": true,
    }
}

brc-dd commented 8 months ago

Ah ok. I didn't read the complete description. I thought you were hosting on Cloudflare pages itself.

vuejs / vitepress