"Hydration completed but contains mismatches" when path contains URL params #3469
Closed
4 tasks done
Labels
bug: pending triage
Maybe a bug, waiting for confirmation
Comments
|
In your Since you were not extending the theme properly, Tip - you can run |
|
Hi @brc-dd thanks for your reply, import Theme from "vitepress/theme"
import { h } from "vue"
import Contributors from "./components/Contributors.vue"
import LauncherBadge from "./components/LauncherBadge.vue"
import ReloadPrompt from "./components/ReloadPrompt.vue"
import giscusTalk from "vitepress-plugin-comment-with-giscus"
import vitepressNprogress from "@andatoshiki/vitepress-plugin-nprogress"
import "@andatoshiki/vitepress-plugin-nprogress/lib/css/index.css"
import "viewerjs/dist/viewer.min.css"
import imageViewer from "vitepress-plugin-image-viewer"
import vImageViewer from "vitepress-plugin-image-viewer/lib/vImageViewer.vue"
import { useData, useRoute } from "vitepress"
import codeblocksFold from "vitepress-plugin-codeblocks-fold" // import method
import "vitepress-plugin-codeblocks-fold/style/index.scss" // import style
import "./style.css"
import vitepressBackToTop from "vitepress-plugin-back-to-top"
import "vitepress-plugin-back-to-top/dist/style.css"
export default {
extends: Theme,
Layout: () => {
return h(Theme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
"doc-footer-before": () => h(Contributors),
"layout-bottom": () => h(ReloadPrompt),
})
},
enhanceApp(ctx) {
ctx.app.component("LauncherBadge", LauncherBadge)
vitepressNprogress(ctx)
ctx.app.component("vImageViewer", vImageViewer)
vitepressBackToTop({
// default
threshold: 300,
})
},
setup() {
// Get frontmatter and route
const { frontmatter } = useData()
const route = useRoute()
// Using
imageViewer(route)
codeblocksFold({ route, frontmatter }, true, 400)
// Obtain configuration from: https://giscus.app/
giscusTalk(
{
repo: "GlobeMC/crashmc.com",
repoId: "R_kgDOKBR8xw",
category: "Giscus",
categoryId: "DIC_kwDOKBR8x84CYOmB",
mapping: "title",
strict: "0",
reactionsEnabled: "1",
emitMetadata: "0",
inputPosition: "top",
theme: "preferred_color_scheme",
lang: "zh-CN",
loading: "lazy",
},
{
frontmatter,
route,
},
)
},
}However, it still has the issue. Terminal logs: Browser console logs |
|
Hi, on which page? |
|
Same page, so http://localhost:4173/client/system.html? |
|
For additional information, this issue won't happen when you first load the page (or load after clear cache), but after you reload the page. I tried remove the pwa and this issue still happen |
|
And it won't happen when you using |
|
Seems like some issue with the PWA plugin. It seems to be breaking on its docs too - https://vite-pwa-org.netlify.app/guide/register-service-worker.html? Can you create an issue at https://github.com/vite-pwa/vitepress/issues (seems to be an edge case as only |
|
@brc-dd Now I make import Theme from "vitepress/theme"
console.error("this error is for ensure the changed has been made, version 3")
export default ThemeAnd I removed every thing relative to Terminal logs are same as above Browser console logs: |
|
Oh yes, my fault, idk why the empty cache reload does not really work |
|
You need to remove service worker too. Open devtools -> application -> service workers -> unregister |
|
It is better to clear storage |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Describe the bug
When I add some url params
?a=1&b=2after the page's URL, the console log an errorHydration completed but contains mismatches.and the page rendering is incorrectReproduction
https://github.com/GlobeMC/crashmc.compnpm run docs:build && pnpm run docs:previewExpected behavior
The two pages should looks exactly same.
System Info
Additional context
I am not sure if it is a vitepress route issue or if it's a pwa route issue, I tried made an example without pwa but it don't have problem
A live example can be https://beta.crashmc.com/analyzer.html and https://beta.crashmc.com/analyzer.html?
Validations
The text was updated successfully, but these errors were encountered: