layout: breaks upon refreshing

[vedxp]

Hey guys, I'm facing this issue:

• Deployed my VitePress site on Vercel
• Visited the site
• Navigated to any page using doc layout
• Refreshed the page
• The layout broke for every page upon refreshing, including the ones using home layout

But, upon refresh a page using home layout, it doesn't break anything.

Here's a screenshot of a page using doc layout:

Before refreshing

After refreshing

Link to the site: Reesors

---

I wonder if this is something I did wrong or a VitePress side issue.

Note
This issue doesn't occur if deployed on Netlify

Help world be really appreciated :)

[brc-dd]

Can you share your .vitepress/config.ts and vercel.json if present? Looks like you've clean urls option present on Vercel but not on VitePress (or vice versa). (.html is getting stripped from urls, causing hydration mismatches)

[vedxp]

Can you share your .vitepress/config.ts and vercel.json if present? Looks like you've clean urls option present on Vercel but not on VitePress (or vice versa). (.html is getting stripped from urls, causing hydration mismatches)

Here's:

> config.ts

> Build Settings set in Vercel

• Build Command: pnpm docs:build
• Output Directory: docs/.vitepress/dist
• Install Command: pnpm install

[brc-dd]

Try creating a file named vercel.json at top of your repo having this:

{
  "cleanUrls": true
}

[vedxp]

Try creating a file named vercel.json at top of your repo having this:

{
  "cleanUrls": true
}

Yeah, thanks!
It worked like a charm.

Please consider documenting this under Deploying on Vercel :)