<transition> with a single, empty child throws an error
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.