v-if on unknown element lead to patch error
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
inpatchBlockChildren
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
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
.
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! :)