hydration mismatch when using auto minify

[HamHwong]

Describe the bug

I built and published vitepress pages to my server, but got Hydration completed but contains mismatches error when i review, and the index page rendered nothing but blank, and other pages show correctlly.

But it runs perfectly on my local within dev mode

Reproduction

• type run npm docs:build and wait.
• zip all release files under destination folder and push it to server
• unzip and place to the nginx root folder
• visit the site

Expected behavior

the index page displays correctlly.

System Info

System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.22 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.1 - /usr/local/opt/nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/local/opt/nvm/versions/node/v14.15.1/bin/yarn
    npm: 6.14.8 - /usr/local/opt/nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Safari: 14.1.1
  npmPackages:
    vitepress: ^0.16.1 => 0.16.1

Additional context

vitepress v0.16.1
vite v2.4.4
⠴ building client + server bundles...Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
⠦ building client + server bundles...Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
⠸ building client + server bundles...
(!) Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ building client + server bundles...
⠙ rendering pages...Warning: Setting up fake worker.
Error: Setting up fake worker failed: "document is not defined".
    at /Users/mpanda/Documents/GitHub/MPC-Documention/node_modules/vitepress/dist/client/app/temp/assets/mpc.umd.7d0f3985.js:41728:54
✓ rendering pages...
build complete in 25.90s.

I do get some warning when runing build process, my vue components library depends to PDF.js and some of my customized directives are using document for creting DOM, I'm not sure if it due to SSR of vitpress.

And following are the configuration of my vitepress project.

docs/.vitepress/config.js

const vue = require('@vitejs/plugin-vue')
// import { Options as VuePluginOptions } from '@vitejs/plugin-vue'
const ssrTransformCustomDir = () => {
  return {
    props: [],
    needRuntime: true,
  }
}
module.exports = {
  title: 'MpandaStudio Components Library', // 顶部左侧标题
  base: '/', // 项目的根路径
  lang: 'zh-CN',
  head: [
    // 设置 描述 和 关键词
    [
      'meta',
      {
        name: 'keywords',
        content:
          'MPanda Studio Vue3 UI Components Library/MPanda Studio Vue3 UI组件库',
      },
    ],
    [
      'meta',
      {
        name: 'description',
        content:
          '此UI组件库基于Vue3开发, 从之前开发的项目中提取并转换为Vue3组件。',
      },
    ],
  ],
  themeConfig: {
    sidebar: {
      // 侧边栏
      '/': [
        {
          text: 'Introduction 介绍',
          children: [
            { text: "What's MPC 什么是MPC？", link: '/' },
            { text: 'Start 从起步到芜湖', link: '/guide/start' },
            // { text: "Configuration 文件配置", link: "/guide/configuration" },
          ],
        },
        {
          text: 'Components 组件',
          children: [
            { text: 'Card 卡片', link: '/guide/Components/Card' },
            { text: 'Carousel 轮播图', link: '/guide/Components/Carousel' },
            { text: 'Modal 弹窗', link: '/guide/Components/Modal' },
            {
              text: 'PDFReader PDF阅读器',
              link: '/guide/Components/PDFReader',
            },
          ],
        },
        {
          text: 'Directives 命令',
          children: [
            { text: 'Suspend 悬浮', link: '/guide/Directives/Suspend' },
            { text: 'Tooltips 提示框', link: '/guide/Directives/Tooltips' },
            { text: 'Blur 模糊', link: '/guide/Directives/Blur' },
          ],
        },
        {
          text: 'Utils 工具包',
          children: [
            {
              text: 'isElementInViewport ',
              link: '/guide/Utils/isElementInViewport',
            },
          ],
        },
      ],
    },
    nav: [
      // 顶部右侧导航栏
      { text: '介绍', link: '/', activeMatch: '^/$|^/guide/' },
      {
        text: '更多',
        link: '/contact/',
      },
    ],
  },
  vue: { 
    template: {
      compilerOptions: {
        directiveTransforms: {
          tooltips: ssrTransformCustomDir,
          suspend: ssrTransformCustomDir,
          blur: ssrTransformCustomDir,
        },
      },
    },
  },
}

docs/.vitepress/theme/index.js

import DefaultTheme from 'vitepress/theme'
import MPC from '@mpanda/mpc'
import '@mpanda/mpc/lib/mpc.css'
export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.use(MPC)
  }
}

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.

[kecrily]

Are you using Cloudflare's Auto Minify feature? You can try to turn it off to see.

[Jenesius]

@brc-dd
WebSite where u can see the problem After reload cash.
Github rep with "minimal" reproducible example. Just one index.md with text.
Error in console: Hydration completed but contains mismatches.

---

Also! After off html (like say @kecrily ) - the web site work fine!

How i undestand Cloudflare broke something after minimilize the html files...

[kecrily]

Cloudflare's minimilize removes comments in html that make sense to vue.

Might need to add this to the documentation.

[brc-dd]

So this is an issue only with "auto minify" features of cloudflare, etc. right? Not with vitepress build && vitepress serve?

[Jenesius]

Hmm, Yes..

[brc-dd]

This issue is actually mentioned here too: https://vite-plugin-ssr.com/hydration-mismatch#common-causes-solutions

Common causes:

• Rendered content is actually different. Make sure that your components render the same content in Node.js as well as in the browser.
• Browser cache: While developing, make sure to disable your browser's cache to ensure that your browser doesn't load cached & outdated JavaScript.
• Proxies: If you use a proxy, make sure it doesn't apply problematic HTML transfomers. For example, if you use Cloudflare, you have to disable Cloudflare's automatic HTML minifier.

Here is in-depth explanation: https://www.endpointdev.com/blog/2019/06/cloudflare-vue-ssr-significant-comments/

Here, the <!-----> placeholder is a significant HTML comment, standing in for a non-visible component in the virtual DOM (the false condition in the v-if directive). Rehydration requires this to be in place for proper handling, so when CF stripped out HTML comments from the returned page output this disrupted the generated server-side DOM. This meant that the server-side DOM no longer matched what Vue was expecting and the client-side hydration failed and the app failed to init properly.

I guess we should just add this to docs then as it cannot be fixed, at least for now. Adding a note here would be sufficient.