Subscribe on changes!

v-if on unknown element lead to patch error

avatar
Sep 6th 2020

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
avatar
Sep 6th 2020

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.

avatar
Sep 6th 2020

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! :)