Gissues: SSR problem with empty text node in render function

skirtles-code

Nov 26th 2022

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eNp9UdtqwzAM/RXNL04gTd5DWxj7jHmMNFXWtPEF2ekKJf8+OZe226BgbF2OzpHkq3h1Lj/3KEqx9jW1LmyVabWzFOAKhwwIGxigIatBMk4qowxexvwem6rvGKcMgMfQu+Qz4yrf2eBhSKcEQG2NDxDwEmAT+RIp00gTc8RlZCBJYbNd8Lfo++IDHBK560OwRrLCPQxgzVvX1qdypogq+bnqemQteap21uoXbnqBDxnIsQA0yjT7JeCY+0ESHsju0Q9ufbYmY4gPX3zWxW2FIhPTFle6cvnRW8MbHhtXc8IrUS6jKMGrjb4ShxCcL4vCN3X8l6PPLX0VbOXUm9BqzNHr1Y7st0diYiXmIUaOgoNnpBWh2SMhPeP8A/3Hu8wlhh/WeawK

Steps to reproduce

Click the button in the Playground example above. Note the console error. The UI also does not update to show the new text.

What is expected?

No error.

What is actually happening?

Uncaught (in promise) TypeError: Cannot set properties of null (setting 'nodeValue')
    at setText (runtime-dom.esm-browser.js:9332:24)
    at processText (runtime-dom.esm-browser.js:6536:17)
    at patch (runtime-dom.esm-browser.js:6491:17)
    at patchKeyedChildren (runtime-dom.esm-browser.js:7274:17)
    at patchChildren (runtime-dom.esm-browser.js:7217:21)
    at patchElement (runtime-dom.esm-browser.js:6731:13)
    at processElement (runtime-dom.esm-browser.js:6592:13)
    at patch (runtime-dom.esm-browser.js:6509:21)
    at patchKeyedChildren (runtime-dom.esm-browser.js:7274:17)
    at patchChildren (runtime-dom.esm-browser.js:7217:21)

Any additional comments?

If you turn off SSR mode in the Playground then everything works fine.

The text node must be empty initially to hit the problem. Any other content seems to be enough to make it work.

I'd imagine there's a problem with the hydration process and the text node not being created for the empty string. However, there isn't a hydration warning, it only fails when trying to change the text.

I wasn't able to reproduce the problem using a template. Both {{ text }} and v-text="text" seemed to work fine.

While h('p', [text.value]) fails, similar attempts such as h('p', text.value) and h('p', [text.value, h('span')]) work fine.