diff --git a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
index d2a576fd02a..905e6a4895d 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -82,8 +82,6 @@ describe('transition-group', () => {
})
if (_ctx.ok) {
_push(\`
ok
\`)
- } else {
- _push(\`\`)
}
_push(\`\`)
}"
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index 1755be3a3b0..53a7a060510 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -141,6 +141,7 @@ export function processChildren(
context: SSRTransformContext,
asFragment = false,
disableNestedFragments = false,
+ disableCommentAsIfAlternate = false,
) {
if (asFragment) {
context.pushStringPart(``)
@@ -191,7 +192,12 @@ export function processChildren(
)
break
case NodeTypes.IF:
- ssrProcessIf(child, context, disableNestedFragments)
+ ssrProcessIf(
+ child,
+ context,
+ disableNestedFragments,
+ disableCommentAsIfAlternate,
+ )
break
case NodeTypes.FOR:
ssrProcessFor(child, context, disableNestedFragments)
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
index 2d434010e2a..a2e284ae841 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
@@ -87,6 +87,13 @@ export function ssrProcessTransitionGroup(
* by disabling nested fragment wrappers from being generated.
*/
true,
+ /**
+ * TransitionGroup filters out comment children at runtime and thus
+ * doesn't expect comments to be present during hydration. We need to
+ * account for that by disabling the empty comment that is otherwise
+ * rendered for a falsy v-if that has no v-else specified. (#6715)
+ */
+ true,
)
context.pushStringPart(``)
context.pushStringPart(tag.exp!)
@@ -106,6 +113,6 @@ export function ssrProcessTransitionGroup(
}
} else {
// fragment
- processChildren(node, context, true, true)
+ processChildren(node, context, true, true, true)
}
}
diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
index 32a5a7c00f1..b30846c1eeb 100644
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -26,6 +26,7 @@ export function ssrProcessIf(
node: IfNode,
context: SSRTransformContext,
disableNestedFragments = false,
+ disableCommentAsIfAlternate = false,
) {
const [rootBranch] = node.branches
const ifStatement = createIfStatement(
@@ -54,7 +55,7 @@ export function ssrProcessIf(
}
}
- if (!currentIf.alternate) {
+ if (!currentIf.alternate && !disableCommentAsIfAlternate) {
currentIf.alternate = createBlockStatement([
createCallExpression(`_push`, ['``']),
])