"Cannot read property '_pending' of null" when using transition component.

[mcmillenb]

Version

2.5.16

Reproduction link

https://jsfiddle.net/6sny3yq9/

Steps to reproduce

1. Open fiddle and type anything into the first field marked "broken".
2. See in the console the error message "Error in nextTick: "TypeError: Cannot read property '_pending' of null"
3. Notice that Vue has stopped working
4. Refresh the fiddle and type anything into the second field marked "working"
5. Notice that everything works as expected

What is expected?

When the value of the input field is "foo" the computed property bar will evaluate to true and the "a" span will display.

When the user changes the value in the input field from "foo" to anything else, the computed property bar will evaluate to false and the "b" span (rendered using v-html) will display.

What is actually happening?

Initially, the value of the input field is "foo" and the computed property bar is evaluated to true, so the "a" span is displaying.

But, when the user changes the value in the input field from "foo" to anything else, Vue crashes and this error message is displayed: Error in nextTick: "TypeError: Cannot read property '_pending' of null"

---

It takes this very specific scenario for the error to appear. In the fiddle, I've shown that by removing the @click="show = !show" event listener, Vue works as expected with no errors.

Here are three other changes that, when made individually, result in Vue working as expected:

• removing the <transition> component surrounding the "a" span
• using <span v-else>{{ b }}</span> instead of <span v-else v-html="b"></span>
• using v-show="bar" and v-show="!bar" instead of the v-if="bar" and v-else directives

Found via this question on Stack Overflow:
https://stackoverflow.com/questions/50400131/cannot-read-property-pending-of-null-when-using-v-html-and-transition#

[posva]

As a workaround, you can key the span with the v-if

[haoqunjiang]

FYI this bug is introduced in 0f2cb09 & 2839e31

It only appears in a specific scenario when the root node of a conditional rendering expression is reused and the new root sets its textContent or innerHTML prop.

For reused DOM nodes, Vue calls updateDOMProps to patch the real DOM.
Because of the abovementioned commits, when v-html is set, its children gets cleared immediately.
So before the descendent transition element's leave hook gets called, its corresponding DOM node has been detached already.
Therefore, an error would be thrown from this line:
https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/modules/transition.js#L255

The DOM node is reused only when sameVnode returns true.
https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js#L35-L43
Since (in the given reproduction) the second span has an v-html attribute, isDef(b.data) returns true. When the first span gets a binding (e.g. @click, :class=, etc.), isDef(a.data)returns true, too.