hydration mismatch with default build

buingoccong0504 commented 2 weeks ago

Describe the bug I built and published vitepress pages to my Azure App Service by ASP.Net Core project, but got Hydration completed but contains mismatches error when i review, and the index page and other pages rendered not correctlly. But it runs perfectly on my local within dev mode

Correcting render:

Expected behavior All page displays correctlly.

index.md

---
layout: home
title: SD-LINES デベロッパーポータル

hero:
  name: "SD-LINES ドキュメンテーション"
  tagline: 当社のサービスでウェブサイトの可能性を高めましょう
  actions:
    - theme: brand
      text: 詳しくはこちら
      link: /ja/docs/overview/about

features:
  - title: ユニークで魅力的な広告
    details: 専門的に最適化された広告表示で、訪問者を魅了し、関与させることでウェブサイトの魅力を高めます
  - title: 効果の即時洞察
    details: 詳細な分析により広告のパフォーマンスを即座に把握し、戦略を効果的に調整し、改善することができます
  - title: 迅速かつ正確な検索
    details: ユーザーが製品を迅速かつ簡単に見つけることができるように支援し、これまでにないシームレスなオンラインショッピング体験を提供します。

---

config.mts

import { defineConfig } from 'vitepress'
import { sidebar } from './config/sidebar'

export default defineConfig({
  title: "SD-LINES Developer",
  description: "SD-LINES Developer Documentation",
  head: [
    ['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  ],
  themeConfig: {
    logo: '/logo.svg',

    sidebar,
    lastUpdated: {
      text: 'Last updated',
      formatOptions: {
        dateStyle: 'medium',
        timeStyle: 'short'
      }
    },
    search: {
      provider: 'local'
    },
  },
  markdown: {
    lineNumbers: true
  },
  cleanUrls: true,
  lastUpdated: true,
  locales: {
    root: {
      label: '日本語',
      lang: 'ja',
      link: '/ja/',
      themeConfig: { 
        nav: [
          { text: 'Home', link: '/ja/' },
          { text: 'Guides', link: '/ja/docs/overview/about' },
          { text: 'Reference', link: '/ja/reference/market' }
        ],
      }
    },
    en: {
      label: 'English',
      lang: 'en',
      link: '/en/',
      themeConfig: { 
        nav: [
          { text: 'Home', link: '/en/' },
          { text: 'Guides', link: '/en/docs/overview/about' },
          { text: 'Reference', link: '/en/reference/market' }
        ],
      }
    },
  }
})

What I tried My site is not using Cloudflare's.

brc-dd commented 2 weeks ago

Please show the relevant code. Try running locally with vitepress build and vitepress preview. You can set DEBUG='*' env variable to get more details.

buingoccong0504 commented 2 weeks ago

Please show the relevant code. Try running locally with vitepress build and vitepress preview. You can set DEBUG='*' env variable to get more details.

I have updated some code. I have run locally with build and preview and it work perfectly. Everything go wrong only after I deployed. Set DEBUG='*'. Should I set into my production environment?

brc-dd commented 2 weeks ago

Should I set into my production environment

No. If everything is fine locally in build and preview, then it's routing issue. Check if your server is serving wrong page for that URL. You can do right click > view page source to verify.

buingoccong0504 commented 2 weeks ago

Should I set into my production environment

No. If everything is fine locally in build and preview, then it's routing issue. Check if your server is serving wrong page for that URL. You can do right click > view page source to verify.

Yes, I have checked it. And I am sure that there is not routing issue. I checked the index.html. And find out minified html. And put in it some new line character. And it like that

with Last updated: text in the end of page.

brc-dd commented 2 weeks ago

And find out minified html

Can you show a screenshot showing that view-source output?

buingoccong0504 commented 2 weeks ago

This is the page source.

brc-dd commented 2 weeks ago

I don't think that is the right page? It doesn't have any HTML corresponding to home page. It is a routing issue. It's probably serving some fallback or something. Check the index.html you generated locally. It should have stuff like class="VPHome"

buingoccong0504 commented 1 week ago

I don't think that is the right page? It doesn't have any HTML corresponding to home page. It is a routing issue. It's probably serving some fallback or something. Check the index.html you generated locally. It should have stuff like class="VPHome"

Above html is rendered/browser/client html. class="VPHome" is existed in my dist/index.html.

brc-dd commented 1 week ago

No. view-source:https://foo.bar/ shows what your server is sending. It doesn't execute any JS.

buingoccong0504 commented 1 week ago

No. view-source:https://foo.bar/ shows what your server is sending. It doesn't execute any JS. I send it.

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>SD-LINES Developer</title>
    <meta name="description" content="SD-LINES Developer Documentation">
    <meta name="generator" content="VitePress v1.1.0">
    <link rel="preload stylesheet" href="/assets/style.BRyfLEQj.css" as="style">

    <script type="module" src="/assets/app.fuBuwN_Y.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.KiLZ7ttZ.js">
    <link rel="modulepreload" href="/assets/chunks/theme.DbR3uHF3.js">
    <link rel="modulepreload" href="/assets/index.md.B6V1I5TH.lean.js">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-d8b57b2d><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8291ffa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8291ffa> Skip to content </a><!--]--><!----><header class="VPNav" data-v-d8b57b2d data-v-7ad780c2><div class="VPNavBar top" data-v-7ad780c2 data-v-844edcde><div class="wrapper" data-v-844edcde><div class="container" data-v-844edcde><div class="title" data-v-844edcde><div class="VPNavBarTitle" data-v-844edcde data-v-0ad69264><a class="title" href="/ja/" data-v-0ad69264><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.svg" alt data-v-ab19afbb><!--]--><span data-v-0ad69264>SD-LINES Developer</span><!--[--><!--]--></a></div></div><div class="content" data-v-844edcde><div class="content-body" data-v-844edcde><!--[--><!--]--><div class="VPNavBarSearch search" data-v-844edcde><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-844edcde data-v-f732b5d0><span id="main-nav-aria-label" class="visually-hidden" data-v-f732b5d0>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/ja/" tabindex="0" data-v-f732b5d0 data-v-08fbf4b6><!--[--><span data-v-08fbf4b6>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/ja/docs/overview/about" tabindex="0" data-v-f732b5d0 data-v-08fbf4b6><!--[--><span data-v-08fbf4b6>Guides</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/ja/reference/market" tabindex="0" data-v-f732b5d0 data-v-08fbf4b6><!--[--><span data-v-08fbf4b6>Reference</span><!--]--></a><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-844edcde data-v-acee064b data-v-af5898d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-af5898d3><span class="text" data-v-af5898d3><span class="vpi-languages option-icon" data-v-af5898d3></span><!----><span class="vpi-chevron-down text-icon" data-v-af5898d3></span></span></button><div class="menu" data-v-af5898d3><div class="VPMenu" data-v-af5898d3 data-v-e42ed9b3><!----><!--[--><!--[--><div class="items" data-v-acee064b><p class="title" data-v-acee064b>日本語</p><!--[--><div class="VPMenuLink" data-v-acee064b data-v-f51f088d><a class="VPLink link" href="/en/ex" data-v-f51f088d><!--[-->English<!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-844edcde data-v-283b26e9><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-283b26e9 data-v-7df97737 data-v-b4ccac88><span class="check" data-v-b4ccac88><span class="icon" data-v-b4ccac88><!--[--><span class="vpi-sun sun" data-v-7df97737></span><span class="vpi-moon moon" data-v-7df97737></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-844edcde data-v-8e87c032 data-v-af5898d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-af5898d3><span class="vpi-more-horizontal icon" data-v-af5898d3></span></button><div class="menu" data-v-af5898d3><div class="VPMenu" data-v-af5898d3 data-v-e42ed9b3><!----><!--[--><!--[--><div class="group translations" data-v-8e87c032><p class="trans-title" data-v-8e87c032>日本語</p><!--[--><div class="VPMenuLink" data-v-8e87c032 data-v-f51f088d><a class="VPLink link" href="/en/ex" data-v-f51f088d><!--[-->English<!--]--></a></div><!--]--></div><div class="group" data-v-8e87c032><div class="item appearance" data-v-8e87c032><p class="label" data-v-8e87c032>Appearance</p><div class="appearance-action" data-v-8e87c032><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-8e87c032 data-v-7df97737 data-v-b4ccac88><span class="check" data-v-b4ccac88><span class="icon" data-v-b4ccac88><!--[--><span class="vpi-sun sun" data-v-7df97737></span><span class="vpi-moon moon" data-v-7df97737></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-844edcde data-v-6bee1efd><span class="container" data-v-6bee1efd><span class="top" data-v-6bee1efd></span><span class="middle" data-v-6bee1efd></span><span class="bottom" data-v-6bee1efd></span></span></button></div></div></div></div><div class="divider" data-v-844edcde><div class="divider-line" data-v-844edcde></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-d8b57b2d data-v-2488c25a><div class="container" data-v-2488c25a><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-2488c25a data-v-cd5350a7><button data-v-cd5350a7>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-d8b57b2d data-v-9a6c75ad><div class="VPDoc has-aside" data-v-9a6c75ad data-v-e6f2a212><!--[--><!--]--><div class="container" data-v-e6f2a212><div class="aside" data-v-e6f2a212><div class="aside-curtain" data-v-e6f2a212></div><div class="aside-container" data-v-e6f2a212><div class="aside-content" data-v-e6f2a212><div class="VPDocAside" data-v-e6f2a212 data-v-cb998dce><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-cb998dce data-v-6b52fe58><div class="content" data-v-6b52fe58><div class="outline-marker" data-v-6b52fe58></div><div class="outline-title" role="heading" aria-level="2" data-v-6b52fe58>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-6b52fe58><span class="visually-hidden" id="doc-outline-aria-label" data-v-6b52fe58> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-6b52fe58 data-v-53c99d69><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-cb998dce></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e6f2a212><div class="content-container" data-v-e6f2a212><!--[--><!--]--><main class="main" data-v-e6f2a212><div style="position:relative;" class="vp-doc _" data-v-e6f2a212><div></div></div></main><footer class="VPDocFooter" data-v-e6f2a212 data-v-b77f9094><!--[--><!--]--><div class="edit-info" data-v-b77f9094><!----><div class="last-updated" data-v-b77f9094><p class="VPLastUpdated" data-v-b77f9094 data-v-19a7ae4e>Last updated: <time datetime="2024-04-10T08:59:20.000Z" data-v-19a7ae4e></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"ja_docs_guides_service-list.md\":\"Cp6VltEI\",\"ja_docs_guides_full-text-search_overview.md\":\"BFrIEgOw\",\"en_docs_guides_full-text-search_item-search.md\":\"j0cPv-xT\",\"en_docs_guides_service.md\":\"ZcxrQ2OR\",\"en_docs_guides_full-text-search_suggest-search.md\":\"BKnJn_A4\",\"index.md\":\"B6V1I5TH\",\"ja_docs_quickstarts_create-banner.md\":\"QaJn-W2W\",\"en_docs_overview_about.md\":\"DeygIoax\",\"en_docs_quickstarts_create-popup.md\":\"BLae6qoL\",\"ja_index.md\":\"C17S-PlE\",\"ja_docs_overview_about.md\":\"D3-kncGC\",\"ja_docs_guides_full-text-search_item-search.md\":\"CZsoxjLL\",\"ja_docs_quickstarts_create-popup.md\":\"CJMv8abt\",\"en_docs_guides_full-text-search_overview.md\":\"DJogw0D2\",\"en_docs_overview_setup.md\":\"DeVSl-hy\",\"ja_docs_quickstarts_create-html.md\":\"BxbebYTH\",\"ja_docs_quickstarts_create-recommend.md\":\"CoD0tVOS\",\"en_docs_quickstarts_create-recommend.md\":\"aJD322FG\",\"ja_docs_quickstarts_create-search-suggest-pc.md\":\"qN9-RFFI\",\"ja_docs_guides_action.md\":\"uo8I0RQL\",\"en_docs_guides_full-text-search_index-setting.md\":\"Dx1jugc0\",\"ja_docs_guides_account.md\":\"Cs50mx9X\",\"ja_docs_guides_dashboard.md\":\"CeTpy53B\",\"en_docs_guides_service-list.md\":\"Dc7HYVUS\",\"en_docs_guides_action.md\":\"CAmVIzMe\",\"ja_docs_guides_full-text-search_index-setting.md\":\"DsjWT-tO\",\"en_docs_quickstarts_create-html.md\":\"BskhPDAU\",\"ja_docs_overview_setup.md\":\"DanoGWFA\",\"en_index.md\":\"q-l5cMR4\",\"en_docs_guides_dashboard.md\":\"7QhGIbrZ\",\"en_docs_quickstarts_create-search-suggest-pc.md\":\"C-t_Hvf6\",\"en_docs_guides_account.md\":\"n_No0SQH\",\"ja_docs_quickstarts_create-search-suggest-mobile.md\":\"soqu99Yx\",\"en_docs_quickstarts_create-search-suggest-mobile.md\":\"D9dFYJ_k\",\"ja_docs_guides_full-text-search_suggest-search.md\":\"BLfzywvd\",\"en_docs_quickstarts_create-banner.md\":\"o0byqPzx\",\"ja_reference_market.md\":\"Bf1pCI_M\",\"en_reference_market.md\":\"BZfuWBy0\",\"ja_docs_guides_service.md\":\"BLuKsjVh\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"SD-LINES Developer\",\"description\":\"SD-LINES Developer Documentation\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"sidebar\":{\"/ja/docs/\":[{\"text\":\"概要\",\"collapsed\":true,\"items\":[{\"text\":\"SD-LINESサービスについて\",\"link\":\"/ja/docs/overview/about\"},{\"text\":\"作業の開始\",\"link\":\"/ja/docs/overview/setup\"}]},{\"text\":\"クイックスタート\",\"collapsed\":true,\"items\":[{\"text\":\"バナーを作成する\",\"link\":\"/ja/docs/quickstarts/create-banner\"},{\"text\":\"ポップアップを作成する\",\"link\":\"/ja/docs/quickstarts/create-popup\"},{\"text\":\"HTMLを作成する\",\"link\":\"/ja/docs/quickstarts/create-html\"},{\"text\":\"おすすめを作成する\",\"link\":\"/ja/docs/quickstarts/create-recommend\"},{\"text\":\"検索提案を作成する（PC）\",\"link\":\"/ja/docs/quickstarts/create-search-suggest-pc\"},{\"text\":\"検索提案を作成する（モバイル）\",\"link\":\"/ja/docs/quickstarts/create-search-suggest-mobile\"}]},{\"text\":\"ガイド\",\"collapsed\":true,\"items\":[{\"text\":\"ダッシュボード\",\"link\":\"/ja/docs/guides/dashboard\"},{\"text\":\"アカウント\",\"link\":\"/ja/docs/guides/account\"},{\"text\":\"サービスリスト\",\"link\":\"/ja/docs/guides/service-list\"},{\"text\":\"サービス\",\"link\":\"/ja/docs/guides/service\"},{\"text\":\"アクション\",\"link\":\"/ja/docs/guides/action\"},{\"text\":\"全文検索\",\"collapsed\":true,\"items\":[{\"text\":\"概要\",\"link\":\"/ja/docs/guides/full-text-search/overview\"},{\"text\":\"インデックス設定\",\"link\":\"/ja/docs/guides/full-text-search/index-setting\"},{\"text\":\"アイテム検索\",\"link\":\"/ja/docs/guides/full-text-search/item-search\"},{\"text\":\"サジェスト検索\",\"link\":\"/ja/docs/guides/full-text-search/suggest-search\"}]}]},{\"text\":\"リファレンス\",\"link\":\"/ja/reference/market\"}],\"/ja/reference/\":[{\"text\":\"リファレンス\",\"items\":[{\"text\":\"マーケット\",\"link\":\"/ja/reference/market\"}]}],\"/en/docs/\":[{\"text\":\"Overview\",\"collapsed\":true,\"items\":[{\"text\":\"About SD-LINES Service\",\"link\":\"/en/docs/overview/about\"},{\"text\":\"Let's set it up\",\"link\":\"/en/docs/overview/setup\"}]},{\"text\":\"Quickstarts\",\"collapsed\":true,\"items\":[{\"text\":\"Create a banner\",\"link\":\"/en/docs/quickstarts/create-banner\"},{\"text\":\"Create a popup\",\"link\":\"/en/docs/quickstarts/create-popup\"},{\"text\":\"Create a html\",\"link\":\"/en/docs/quickstarts/create-html\"},{\"text\":\"Create a recommend\",\"link\":\"/en/docs/quickstarts/create-recommend\"},{\"text\":\"Create a search suggest (PC)\",\"link\":\"/en/docs/quickstarts/create-search-suggest-pc\"},{\"text\":\"Create a search suggest (Mobile)\",\"link\":\"/en/docs/quickstarts/create-search-suggest-mobile\"}]},{\"text\":\"How to guides\",\"collapsed\":true,\"items\":[{\"text\":\"Dashboard\",\"link\":\"/en/docs/guides/dashboard\"},{\"text\":\"Account\",\"link\":\"/en/docs/guides/account\"},{\"text\":\"Service List\",\"link\":\"/en/docs/guides/service-list\"},{\"text\":\"Service\",\"link\":\"/en/docs/guides/service\"},{\"text\":\"Action\",\"link\":\"/en/docs/guides/action\"},{\"text\":\"Full-Text Search\",\"collapsed\":true,\"items\":[{\"text\":\"Overview\",\"link\":\"/en/docs/guides/full-text-search/overview\"},{\"text\":\"Index Setting\",\"link\":\"/en/docs/guides/full-text-search/index-setting\"},{\"text\":\"Item Search\",\"link\":\"/en/docs/guides/full-text-search/item-search\"},{\"text\":\"Suggest Search\",\"link\":\"/en/docs/guides/full-text-search/suggest-search\"}]}]},{\"text\":\"Reference\",\"link\":\"/en/reference/market\"}],\"/en/reference/\":[{\"text\":\"Reference\",\"items\":[{\"text\":\"Market\",\"link\":\"/en/reference/market\"}]}]},\"lastUpdated\":{\"text\":\"Last updated\",\"formatOptions\":{\"dateStyle\":\"medium\",\"timeStyle\":\"short\"}},\"search\":{\"provider\":\"local\"}},\"locales\":{\"root\":{\"label\":\"日本語\",\"lang\":\"ja\",\"link\":\"/ja/\",\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/ja/\"},{\"text\":\"Guides\",\"link\":\"/ja/docs/overview/about\"},{\"text\":\"Reference\",\"link\":\"/ja/reference/market\"}]}},\"en\":{\"label\":\"English\",\"lang\":\"en\",\"link\":\"/en/\",\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/en/\"},{\"text\":\"Guides\",\"link\":\"/en/docs/overview/about\"},{\"text\":\"Reference\",\"link\":\"/en/reference/market\"}]}}},\"scrollOffset\":134,\"cleanUrls\":true}");</script>

  </body>
</html>

vuejs / vitepress

hydration mismatch with default build #3780