Subscribe on changes!

<transition> with a single, empty child throws an error

avatar
Jan 31st 2021

Version

3.0.5

Also reproducible in 3.0.4. It works fine in 3.0.3.

Reproduction link

https://jsfiddle.net/skirtle/be5o7zv9/

Arguably, the example above is invalid because it uses a single, fixed child inside a <transition>. A more realistic example that exhibits the same problem would be:

https://jsfiddle.net/skirtle/xr6pnLhc/1/

In both cases the problem goes away if the empty <div> is given some content, or if you add v-if="true" to it.

What is actually happening?

The error is:

Uncaught TypeError: Cannot read property 'length' of null
    at filterSingleRoot (vue.global.js:2062)
    at getChildRoot (vue.global.js:2041)
    at renderComponentRoot (vue.global.js:1950)
    at componentEffect (vue.global.js:5353)
    at reactiveEffect (vue.global.js:407)
    at effect (vue.global.js:382)
    at setupRenderEffect (vue.global.js:5336)
    at mountComponent (vue.global.js:5294)
    at processComponent (vue.global.js:5254)
    at patch (vue.global.js:4882)

This was originally reported as a documentation bug (see https://github.com/vuejs/docs-next/issues/827). One of the CodePen examples in the documentation used a <slot> inside a <transition>, similar to the second example above. That example has been patched up to avoid this error until it can be fixed properly.