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.

[OrbisK]

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.

At vueuse we are facing hydration mismatch. I tracked the error down to the HomeContent. #4493

@medemi68 you can enable __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ to get more details about the mismatch

[brc-dd]

I tracked the error down to the HomeContent. #4493

That doesn't cause actual hydration errors. attribute-only mismatches only show the warnings when that flag is set. 👀 Is there an open issue at vueuse's repo? But yeah I think we can merge 4493. Let me check once with non-overlay sidebars.

you can enable VUE_PROD_HYDRATION_MISMATCH_DETAILS to get more details about the mismatch

One can also run DEBUG=true pnpm docs:build && pnpm docs:preview.

[OrbisK]

Is there an open issue at vueuse's repo

we dont have an issue for this (not sure why tho) and its not causing any "real issues".

Its still present at vueuse docs: https://vueuse.org/shared/createGlobalState/

[brc-dd]

Very weird. It's not happening on mac. I'll check on Windows 👀

[OrbisK]

Very weird. It's not happening on mac. I'll check on Windows 👀

I manually compared the server html with the hydrated html:

maybe its a vueuse localization issue 🤔:

Local served build (DEBUG=true) only shows the error from #4493

[brc-dd]

Ah yeah, got it. Overrode the locale from sensors tab. It shows the error now. It's the changelog stuff.

[OrbisK]

Ah yeah, got it. Overrode the locale from sensors tab. It shows the error now. It's the changelog stuff.

sorry, can you explain this? How do you get the error?

EDIT: ohhh. you mean the dates? 😅

[brc-dd]

https://github.com/vueuse/vueuse/blob/72c9aea0ff33105354d000040ec63807420e9d26/packages/.vitepress/theme/components/Changelog.vue#L54

This can be different in client than in server.

You should do that inside onMounted.

vitepress/src/client/theme-default/components/VPDocFooterLastUpdated.vue

Lines 13 to 25 in 7d94481

	// set time on mounted hook to avoid hydration mismatch due to
	// potential differences in timezones of the server and clients
	onMounted(() => {
	watchEffect(() => {
	datetime.value = new Intl.DateTimeFormat(
	theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
	theme.value.lastUpdated?.formatOptions ?? {
	dateStyle: 'short',
	timeStyle: 'short'
	}
	).format(date.value)
	})
	})

Date time formatting stuff is tricky, and since it's inside v-for in your case, it will be more tricky. But maybe you can create a separate DateTime component that handles the SSR and formatting stuff, and use it instead. It should work fine I guess.

Or maybe just add data-allow-mismatch="text" on the span. It should work fine IMO.

sorry, can you explain this? How do you get the error?

• open devtools
• press ctrl + p
• write > sensor
• select show sensors
  
• update to something that doesn't have the same locale as yours (if checking on localhost) or as server (if checking the deployed version):
  
• reload the page

Daniel created a whole module for this in Nuxt - https://github.com/danielroe/nuxt-time 😅