fix(ssr): don't render comments in TransitionGroup

fix #6715

Author: jonaskuske

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -137,7 +137,8 @@ export function processChildren(
   parent: Container,
   context: SSRTransformContext,
   asFragment = false,
-  disableNestedFragments = false
+  disableNestedFragments = false,
+  disableCommentAsIfAlternate = false
 ) {
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
@@ -186,7 +187,7 @@ export function processChildren(
         )
         break
       case NodeTypes.IF:
-        ssrProcessIf(child, context, disableNestedFragments)
+        ssrProcessIf(child, context, disableNestedFragments, disableCommentAsIfAlternate)
         break
       case NodeTypes.FOR:
         ssrProcessFor(child, context, disableNestedFragments)

packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts

@@ -78,6 +78,13 @@ export function ssrProcessTransitionGroup(
          * be patched using the same key map) so we need to account for that here
          * 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(`</`)
@@ -95,6 +102,6 @@ export function ssrProcessTransitionGroup(
     }
   } else {
     // fragment
-    processChildren(node, context, true, true)
+    processChildren(node, context, true, true, true)
   }
 }

packages/compiler-ssr/src/transforms/ssrVIf.ts

@@ -25,7 +25,8 @@ export const ssrTransformIf = createStructuralDirectiveTransform(
 export function ssrProcessIf(
   node: IfNode,
   context: SSRTransformContext,
-  disableNestedFragments = false
+  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`, ['`<!---->`'])
     ])