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

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[NickBang]

I have the same problem

[userquin]

I also have the same problem.

[zhuyankun]

I also have the same problem.

[YangQuan666]

I also have the same problem.

[zhuyankun]

通过修改 link 的值已解决

{ text: '指南', link: '/guide/' } -> { text: '指南', link: '/guide/index.html' }

[HamHwong]

通过修改 link 的值已解决

{ text: '指南', link: '/guide/' } -> { text: '指南', link: '/guide/index.html' }

Still not working for me...

[HamHwong]

Here is my updates: I wrapped my doms which including my custom directives, built with some error, so I have to go through the compling process and kept the directiveTransforms in the config.js and list my custom directive names, like this: And now it can be built fluently, Then I started a web server from VS to check the generated dist files, and found no any error, soo suprise Later after double check and tons of refreshing, I pushed them to server, expect some miracle. Of course, still not working... TAT But sudently, It came to me that my validation on local server was via IP, so I tried it, It shown correctlly, WTF?

I dont get it, soo weird...

It seems something related to my DNS provider (I'm using Cloudflare), After tried to change some settings, I found site works with my domain name only when I enabled 'dev mode' on CDN settings, which means request to the domain will not get any cache from CDN and directlly to my host,

oh, cache

I'm not sure, but I have a feeling, it seems related to CDN cache and bundled SSR, but I'm not soo familar with SSR ... Is that the SSR bundled in the vitepress building process?

What about runing a server?

So I changed my Nginx configration to redirect to 5000 port, run docs:serve with pm2.

Sadly, Still... I'm confused...

Until now, that's all my found.

[yyx990803]

Please provide a full reproduction with latest version of VitePress.

[userquin]

With 0.19.2 version I cannot reproduce it. I had the problem when updating some content pages on the vite-plugin-pwa docs page.

[HamHwong]

Please provide a full reproduction with latest version of VitePress.

I've updated to the latest version (0.20.0), but still got this error. you can see here mysite... and here's my repository

[0x009922]

I have the same problem here: published docs (there is also a link to a github monorepo)

Also there are weird render artifacts:

Alongside from unexpected __VP_STATIC* stuff note that originally markdown ends with Also section, but here you can see duplicated content rendering.

I think that https://github.com/vuejs/vitepress/issues/420 is a referenced issue here.

[brc-dd]

Can someone provide a "minimal" reproducible example for this with VitePress alpha??

[Jenesius]

I have the save problem. @HamHwong Do u resolve it? I also use Cloudflare for hash files. If i toggle to Development Mode - it work fine! site github Also HTML source looks strange. Problem with Cloudflare chash

[Jenesius]

@brc-dd I will provide today

[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.