Skip to content

Commit 6cb00ed

Browse files
authored
fix(ssr): fix hydration error for slot outlet inside transition-group (#9937)
close #9933
1 parent c3fd577 commit 6cb00ed

File tree

2 files changed

+23
-3
lines changed

2 files changed

+23
-3
lines changed

packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,4 +127,20 @@ describe('ssr: <slot>', () => {
127127
}"
128128
`)
129129
})
130+
131+
test('inside transition-group', () => {
132+
const { code } = compile(
133+
`<TransitionGroup tag="div"><slot/></TransitionGroup>`,
134+
)
135+
expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
136+
expect(code).toMatchInlineSnapshot(`
137+
"const { ssrRenderSlotInner: _ssrRenderSlotInner, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
138+
139+
return function ssrRender(_ctx, _push, _parent, _attrs) {
140+
_push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
141+
_ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
142+
_push(\`</div>\`)
143+
}"
144+
`)
145+
})
130146
})

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
NodeTypes,
55
type SlotOutletNode,
66
TRANSITION,
7+
TRANSITION_GROUP,
78
createCallExpression,
89
createFunctionExpression,
910
isSlotOutlet,
@@ -37,16 +38,19 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
3738

3839
let method = SSR_RENDER_SLOT
3940

40-
// #3989
41+
// #3989, #9933
4142
// check if this is a single slot inside a transition wrapper - since
42-
// transition will unwrap the slot fragment into a single vnode at runtime,
43+
// transition/transition-group will unwrap the slot fragment into vnode(s) at runtime,
4344
// we need to avoid rendering the slot as a fragment.
4445
const parent = context.parent
46+
let componentType
4547
if (
4648
parent &&
4749
parent.type === NodeTypes.ELEMENT &&
4850
parent.tagType === ElementTypes.COMPONENT &&
49-
resolveComponentType(parent, context, true) === TRANSITION &&
51+
((componentType = resolveComponentType(parent, context, true)) ===
52+
TRANSITION ||
53+
componentType === TRANSITION_GROUP) &&
5054
parent.children.filter(c => c.type === NodeTypes.ELEMENT).length === 1
5155
) {
5256
method = SSR_RENDER_SLOT_INNER

0 commit comments

Comments
 (0)