v-if on unknown element lead to patch error

[Fuzzyma]

Version

3.0.0-rc.10

Reproduction link

https://codesandbox.io/s/adoring-framework-zc9cs?file=/src/App.vue

Steps to reproduce

• Open the link
• click on the button once or twice
• open the console to see an error TypeError: oldVNode is undefined in patchBlockChildren

What is expected?

The unknown component should be ignored

What is actually happening?

It throws an error

---

Full stacktrace:

TypeError: oldVNode is undefined
    patchBlockChildren runtime-core.esm-bundler.js:2907
    processFragment runtime-core.esm-bundler.js:2967
    patch runtime-core.esm-bundler.js:2680
    componentEffect runtime-core.esm-bundler.js:3167
    reactiveEffect reactivity.esm-bundler.js:42
    callWithErrorHandling runtime-core.esm-bundler.js:149
    flushJobs runtime-core.esm-bundler.js:294
    promise callback*nextTick runtime-core.esm-bundler.js:225
    queueFlush runtime-core.esm-bundler.js:251
    queueJob runtime-core.esm-bundler.js:230
    run reactivity.esm-bundler.js:170
    trigger reactivity.esm-bundler.js:179
    set value reactivity.esm-bundler.js:654
    toggle App.vue:14
    1 App.vue:4
    callWithErrorHandling runtime-core.esm-bundler.js:149
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:158
    invoker runtime-dom.esm-bundler.js:290
    addEventListener runtime-dom.esm-bundler.js:238
    patchEvent runtime-dom.esm-bundler.js:274
    patchProp runtime-dom.esm-bundler.js:326
    mountElement runtime-core.esm-bundler.js:2762
    processElement runtime-core.esm-bundler.js:2738
    patch runtime-core.esm-bundler.js:2684
    mountChildren runtime-core.esm-bundler.js:2809
    processFragment runtime-core.esm-bundler.js:2959
    patch runtime-core.esm-bundler.js:2680
    componentEffect runtime-core.esm-bundler.js:3103
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:3069
    mountComponent runtime-core.esm-bundler.js:3028
    processComponent runtime-core.esm-bundler.js:2984
    patch runtime-core.esm-bundler.js:2687
    render runtime-core.esm-bundler.js:3705
    reload runtime-core.esm-bundler.js:2160
    reload runtime-core.esm-bundler.js:2288
    reload runtime-core.esm-bundler.js:2262
    tryWrap runtime-core.esm-bundler.js:2302
    <anonymous> App.vue:14
    vue main.js:1367
    __webpack_require__ main.js:726
    hotApply main.js:659
    hotUpdateDownloaded main.js:313
    promise callback*hotUpdateDownloaded main.js:312
    hotAddUpdateChunk main.js:288
    webpackHotUpdateCallback main.js:8
    <anonymous> main.0c7661451c555de212c0.hot-update.js:1
runtime-core.esm-bundler.js:208

[HcySunYang]

You should ensure that the component is always registered correctly, why do you need unregistered components? If it's a built-in component(specific platform), you may need the corresponding compiler options:

/**
   * If the pairing runtime provides additional built-in elements, use this to
   * mark them as built-in so the compiler will generate component vnodes
   * for them.
   */
  isBuiltInComponent?: (tag: string) => symbol | void

And, I tracked down this issue, the error is caused by the unknown component resolve to a plain element, so it was not collected as dynamicChildren.

[Fuzzyma]

You should ensure that the component is always registered correctly, why do you need unregistered components?

Yeah, of course. Still it shouldn't error out, right? :)
Especially since there is a warning that the component is unknown and therefore some would think that it is handled gracefully.

Great that you found the issue! :)