Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hydration completed but contains mismatches when using Github pages

See original GitHub issue

Describe the bug

The browser console prints Hydration completed but contains mismatches when deploying the site using Github pages. And the page switch does not work as expected.

Reproduction

Here is a reproduced repo: https://github.com/Corona-Studio/CSKB_Hosting

Expected behavior

The page switch buttons should work after a click.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 13.26 GB / 31.82 GB
  Binaries:
    Node: 18.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\node_modules\.bin\yarn.CMD
    npm: 8.13.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.47)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vitepress: ^1.0.0-alpha.4 => 1.0.0-alpha.4

Additional context

No response

Validations

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.

Issue Analytics

State:
Created a year ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

brc-ddcommented, Aug 10, 2022

Disable auto minify for HTML, it would work. It is already written in the docs.

0reactions

laolarou726commented, Aug 11, 2022

@chenyo2691 参考：

检查 Nginx 是否有任何自动优化 JS/HTML 资源的措施。如果有，尝试禁用。

Top Results From Across the Web

Hydration completed but contains mismatches #1627 - GitHub

Describe the bug It will report errors in production app.b77605b4.js:1 Hydration completed but contains mismatches Reproduction Expected ...

Hydration completed but contains mismatches. `entry.mjs ...

Describe the bug. When you use the default app.vue that comes when installing Nuxt, the page does not return any errors. app.vue.

Hydration completed but contains mismatches in ssr-vue ...

Describe the bug I used the demo in packages/playground/ssr-vue. Adding one command: "scripts": { "vite": "vite", } and then run as a CSR ......

hydration mismatch when using auto minify #369 - GitHub

I built and published vitepress pages to my server, but got Hydration completed but contains mismatches error when i review, and the index ......

Bug: Incorrect Hydration Mismatch Detection during Suspense ...

Add a component that will suspend to load some data (faked). Render at least one sibling component after the suspending component. Render server-side...