Hydration mismatch issue

[medemi68]

Describe the bug

Hello Everyone,

I just found a weird issue that happens for me (and I think others) when building and serving Vitepress. I am on version 1.6.3.

When using serve -s .vitepress/dist -l 8080 after building, the page fails to render correctly and I also get the following issue in the console. This only seems to happen when navigating directly to pages by URL.

Hydration completed but contains mismatches.

HOWEVER, I seem to have found a workaround when using http-server instead? It seems to work fine with:

npx http-server .vitepress/dist -p 8080 --push-state

Do we think this might be an issue related to vitepress or with serve?

Reproduction

Use vitepress 1.6.3, and npm install -g serve, then run serve -s .vitepress/dist -l 8080

Expected behavior

The site should be statically served without issues.

System Info

System:
    OS: macOS 14.6.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 271.31 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 17.6
  npmPackages:
    vitepress: ^1.6.3 => 1.6.3

Additional context

No response

Validations

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

[brc-dd]

Can you share a sample repo where this is happening? One possible reason might be you’ve clean urls enabled and in serve you need to pass some flag to make it work.