FIX: fix Hydration completed but contains mismatches error in production #89

2024-05-08T12:03:04+08:00

ChocolateAceCream commented

2024-05-08 12:03:04 +08:00

(Migrated from github.com)

When refresh page in production env, sidebar lost due to Hydration completed but contains mismatches error.

You can enable VUE_PROD_HYDRATION_MISMATCH_DETAILS in docs/.vitepress/config.ts so details about Hydration error is shown in produc tion.

export default withMermaid(
  defineConfig({
    vite: {
          define: {
            // enable hydration mismatch details in production build
            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
          },
        },
 //...

The root cause is in docs/.vitepress/config.ts is only wrapping the footer but not the whole layout.

Great project btw, saved me alot of time for doing a knowledge of my own, thanks!

When refresh page in production env, sidebar lost due to **Hydration completed but contains mismatches** error. You can enable __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ in [docs/.vitepress/config.ts](https://github.com/Charles7c/charles7c.github.io/commit/7c63dd08ef8465e484f5aac3d8761e244294ec76#diff-3def678deb1b1d5a53948eb8491817dde4dc881e032e785fc61cc93d334eefcd) so details about Hydration error is shown in produc tion. ```js export default withMermaid( defineConfig({ vite: { define: { // enable hydration mismatch details in production build __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true, }, }, //... ``` The root cause is <ClientOnly> in [docs/.vitepress/config.ts](https://github.com/Charles7c/charles7c.github.io/commit/7c63dd08ef8465e484f5aac3d8761e244294ec76#diff-3def678deb1b1d5a53948eb8491817dde4dc881e032e785fc61cc93d334eefcd) is only wrapping the footer but not the whole layout. Great project btw, saved me alot of time for doing a knowledge of my own, thanks!

Charles7c (Migrated from github.com) reviewed 2024-05-08 12:03:04 +08:00

Charles7c commented

2024-05-08 14:05:28 +08:00

(Migrated from github.com)

Thank you for your PR.

This repo is archived. You cannot comment on pull requests.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Charles7c/vitepress-theme-blog-charles7c-s1#89