From 3bf34b767e4dd3cf6a974301ecf0363ae4dda4ec Mon Sep 17 00:00:00 2001
From: Doctorwu <44631608+Doctor-wu@users.noreply.github.com>
Date: Mon, 8 Jan 2024 18:48:47 +0800
Subject: [PATCH] fix(runtime-core): handle fragment with null children
 (#10010)

close #10007
---
 .../runtime-core/__tests__/rendererFragment.spec.ts  | 12 ++++++++++++
 packages/runtime-core/src/renderer.ts                |  6 +++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/__tests__/rendererFragment.spec.ts b/packages/runtime-core/__tests__/rendererFragment.spec.ts
index a8299ef93df..5f1e869366f 100644
--- a/packages/runtime-core/__tests__/rendererFragment.spec.ts
+++ b/packages/runtime-core/__tests__/rendererFragment.spec.ts
@@ -351,4 +351,16 @@ describe('renderer: fragment', () => {
     render(renderFn(['two', 'one']), root)
     expect(serializeInner(root)).toBe(`text<div>two</div>text<div>one</div>`)
   })
+
+  // #10007
+  test('empty fragment', () => {
+    const root = nodeOps.createElement('div')
+
+    const renderFn = () => {
+      return openBlock(true), createBlock(Fragment, null)
+    }
+
+    render(renderFn(), root)
+    expect(serializeInner(root)).toBe('')
+  })
 })
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index cb141d216ff..c7dfbf45dd2 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1086,7 +1086,11 @@ function baseCreateRenderer(
       // since they are either generated by the compiler, or implicitly created
       // from arrays.
       mountChildren(
-        n2.children as VNodeArrayChildren,
+        // #10007
+        // such fragment like `<></>` will be compiled into
+        // a fragment which doesn't have a children.
+        // In this case fallback to an empty array
+        (n2.children || []) as VNodeArrayChildren,
         container,
         fragmentEndAnchor,
         parentComponent,