diff --git a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
index 2f6cd7b3f39..87dc922ddf6 100644
--- a/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
+++ b/packages/runtime-vapor/__tests__/apiCreateDynamicComponent.spec.ts
@@ -1,6 +1,13 @@
-import { shallowRef } from '@vue/reactivity'
-import { nextTick } from '@vue/runtime-dom'
-import { createDynamicComponent } from '../src'
+import { ref, shallowRef } from '@vue/reactivity'
+import { nextTick, resolveDynamicComponent } from '@vue/runtime-dom'
+import {
+ createComponentWithFallback,
+ createDynamicComponent,
+ renderEffect,
+ setHtml,
+ setInsertionState,
+ template,
+} from '../src'
import { makeRender } from './_utils'
const define = makeRender()
@@ -54,4 +61,22 @@ describe('api: createDynamicComponent', () => {
await nextTick()
expect(html()).toBe('')
})
+
+ test('render fallback with insertionState', async () => {
+ const { html, mount } = define({
+ setup() {
+ const html = ref('hi')
+ const n1 = template('
', true)() as any
+ setInsertionState(n1)
+ const n0 = createComponentWithFallback(
+ resolveDynamicComponent('button') as any,
+ ) as any
+ renderEffect(() => setHtml(n0, html.value))
+ return n1
+ },
+ }).create()
+
+ mount()
+ expect(html()).toBe('')
+ })
})
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 03675475b8d..c6602ec961b 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -476,6 +476,14 @@ export function createComponentWithFallback(
return createComponent(comp, rawProps, rawSlots, isSingleRoot)
}
+ const _insertionParent = insertionParent
+ const _insertionAnchor = insertionAnchor
+ if (isHydrating) {
+ locateHydrationNode()
+ } else {
+ resetInsertionState()
+ }
+
const el = document.createElement(comp)
// mark single root
;(el as any).$root = isSingleRoot
@@ -494,6 +502,10 @@ export function createComponentWithFallback(
}
}
+ if (!isHydrating && _insertionParent) {
+ insert(el, _insertionParent, _insertionAnchor)
+ }
+
return el
}