fix(theme-yun): render YunAdBoard placeholder as a comment node to fix SSR hydration (#711) by YunYouJun · Pull Request #712 · YunYouJun/valaxy

YunYouJun · 2026-06-22T02:04:40Z

Summary

Fixes #711 — opening a post page directly throws TypeError: Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node' on any page that renders YunLayoutLeft.

Root cause

YunAdBoard.vue is an empty, user-overridable placeholder. It rendered a bare <template />, which Vue's SSR compiler serializes as a real <template></template> element:

// ssrRender (raw `<template />`)
_push(`<template></template>`)

On the client the component resolves to nothing, so during hydration Vue tries to replace that SSR <template> DOM node with null → replaceChild throws.

Fix

Render the placeholder with <template v-if="false" /> so it emits a comment node consistently in both SSR and on the client:

// ssrRender → `<!---->`     // client render → createCommentVNode("v-if", true)

SSR and client now agree, so hydration matches.

Why not `<div />` (the fix suggested in the issue)?

A comment node is not a flex item, so it adds no gap to the parent .yun-layout-left (flex + gap-4) layout. An empty <div> is a flex item and would reintroduce the exact spacing bug that commit ab57216f ("empty template for YunAdBoard parent gap size") originally fixed by switching <div /> → <template />. <template v-if="false" /> satisfies both constraints: no hydration crash and no gap.

Test

Adds test/client/yun-adboard.test.ts, which compiles the real YunAdBoard.vue, and asserts:

its SSR output contains no raw <template> element;
it renders nothing visible (comment-only);
it hydrates in jsdom with no mismatch.

A control case confirms the old <template /> form serializes back to a <template> element (the regression guard). Reverting the component to the broken form makes the suite fail — test 2 reproduces the original TypeError exactly.

Verification

pnpm run build ✅
pnpm lint ✅
pnpm typecheck ✅
pnpm test ✅ (the 2 failing test/build/* cases require a prior pnpm demo:build and are unrelated to this change)

🤖 Generated with Claude Code

…e to fix SSR hydration (close #711) The empty `<template />` placeholder in YunAdBoard is serialized as a real `<template></template>` element during SSR. On hydration Vue resolves the component to null and tries to replace that DOM node, throwing `TypeError: Failed to execute 'replaceChild' on 'Node'` on every page that renders YunLayoutLeft (e.g. opening a post directly). Switching to `<template v-if="false" />` makes the component render a comment node consistently in both SSR and on the client, so hydration matches. A comment node is also not a flex item, so this keeps the no-gap behaviour of the parent `.yun-layout-left` layout that ab57216 introduced — the reason the placeholder was changed from `<div />` to `<template />` in the first place. Reverting to `<div />` (as suggested in the issue) would fix hydration but reintroduce that gap. Adds a regression test that compiles the real component, asserts its SSR output contains no raw `<template>` element, and verifies it hydrates without a mismatch. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel · 2026-06-22T02:04:47Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
valaxy-docs-dev	Ready	Preview, Comment	Jun 22, 2026 2:40am

github-actions · 2026-06-22T02:06:01Z

🚀 Deployed on https://6a38a0695ac75da1ac739b51--valaxy.netlify.app

cloudflare-workers-and-pages · 2026-06-22T02:06:07Z

Deploying valaxy with Cloudflare Pages

Latest commit:	`9286950`
Status:	✅ Deploy successful!
Preview URL:	https://cd4837e7.valaxy.pages.dev
Branch Preview URL:	https://fix-711.valaxy.pages.dev

View logs

cloudflare-workers-and-pages · 2026-06-22T02:07:27Z

Deploying valaxy-api with Cloudflare Pages

Latest commit:	`9286950`
Status:	✅ Deploy successful!
Preview URL:	https://8a69ae42.valaxy-api.pages.dev
Branch Preview URL:	https://fix-711.valaxy-api.pages.dev

View logs

Copilot

Pull request overview

This PR fixes an SSR hydration crash in valaxy-theme-yun where the empty, user-overridable YunAdBoard placeholder was serialized as a real <template> element in SSR, causing Vue hydration to attempt an invalid DOM replacement when the client renders nothing.

Changes:

Updated YunAdBoard.vue to render the placeholder as a stable comment node via <template v-if="false" />, avoiding both hydration errors and unwanted flex-gap layout effects.
Added a Vitest + jsdom regression test that compiles the real SFC template, asserts SSR output contains no raw <template> element, and verifies hydration produces no mismatch warnings/errors.
Added a control test documenting the previous broken <template /> behavior to prevent regression.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
`packages/valaxy-theme-yun/components/YunAdBoard.vue`	Switches the placeholder output to a comment node (SSR + client consistent) to prevent hydration crashes without affecting layout gap.
`test/client/yun-adboard.test.ts`	Adds a regression test suite covering SSR serialization and jsdom hydration behavior for the real `YunAdBoard` SFC.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Ensures the console.error/warn spies in the YunAdBoard hydration test are always restored, even if the mount assertion throws on a regression, so the mocks never leak into later tests. Addresses Copilot review feedback on #712. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Drop the redundant named imports from `vue` and `vue/server-renderer` and call `Vue.createSSRApp` / `serverRenderer.renderToString` off the namespace objects (which are already needed wholesale by the compiled render functions). Addresses Copilot review feedback on #712. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

github-actions · 2026-06-22T02:46:38Z

vercel Bot deployed to Preview June 22, 2026 02:05 View deployment

github-actions Bot temporarily deployed to pull request June 22, 2026 02:06 Inactive

YunYouJun requested a review from Copilot June 22, 2026 02:17

Copilot started reviewing on behalf of YunYouJun June 22, 2026 02:18 View session

Copilot AI reviewed Jun 22, 2026

View reviewed changes

Comment thread test/client/yun-adboard.test.ts Outdated

github-actions Bot temporarily deployed to pull request June 22, 2026 02:23 Inactive

vercel Bot deployed to Preview June 22, 2026 02:23 View deployment

YunYouJun requested a review from Copilot June 22, 2026 02:34

Copilot started reviewing on behalf of YunYouJun June 22, 2026 02:34 View session

Copilot AI reviewed Jun 22, 2026

View reviewed changes

Comment thread test/client/yun-adboard.test.ts

github-actions Bot temporarily deployed to pull request June 22, 2026 02:39 Inactive

vercel Bot deployed to Preview June 22, 2026 02:40 View deployment

YunYouJun requested a review from Copilot June 22, 2026 02:41

Copilot started reviewing on behalf of YunYouJun June 22, 2026 02:41 View session

YunYouJun changed the title ~~fix(valaxy-theme-yun): render YunAdBoard placeholder as a comment node to fix SSR hydration (#711)~~ fix(theme-yun): render YunAdBoard placeholder as a comment node to fix SSR hydration (#711) Jun 22, 2026

Copilot AI reviewed Jun 22, 2026

View reviewed changes

YunYouJun merged commit 57f36c7 into main Jun 22, 2026
15 checks passed

YunYouJun deleted the fix/711 branch June 22, 2026 02:46

YunYouJun mentioned this pull request Jul 31, 2026

直接从链接进入post，或在post页面刷新后，“文章目录”内容消失且无法进入“关于我”页面 #718

Closed

3 tasks

Navigation Menu

Uh oh!

fix(theme-yun): render YunAdBoard placeholder as a comment node to fix SSR hydration (#711) - #712

fix(theme-yun): render YunAdBoard placeholder as a comment node to fix SSR hydration (#711)#712
YunYouJun merged 3 commits into
mainfrom
fix/711

YunYouJun commented Jun 22, 2026

Uh oh!

vercel Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

YunYouJun commented Jun 22, 2026

Summary

Root cause

Fix

Why not <div /> (the fix suggested in the issue)?

Test

Verification

Uh oh!

vercel Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying valaxy with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying valaxy-api with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Why not `<div />` (the fix suggested in the issue)?

vercel Bot commented Jun 22, 2026 •

edited

Loading

github-actions Bot commented Jun 22, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jun 22, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jun 22, 2026 •

edited

Loading