Subscribe on changes!

`parent is null` error for a specific combination of slot, v-if and changing refs

avatar
Jun 11th 2021

Version

3.1.1

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuIDxCYXIgOmJhcj1cImJhclwiIDpiYXo9XCJiYXpcIi8+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuaW1wb3J0IEJhciBmcm9tICcuL0Jhci52dWUnXG5pbXBvcnQge3JlZn0gZnJvbSBcInZ1ZVwiO1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdBcHAnLFxuICBjb21wb25lbnRzOiB7XG4gICAgQmFyXG4gIH0sXG4gIHNldHVwKCkge1xuICAgIGNvbnN0IGJhciA9IHJlZig3KTtcbiAgICBjb25zdCBiYXogPSByZWYoNyk7XG5cbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIGJhci52YWx1ZSA9IDM7XG4gICAgICBiYXoudmFsdWUgPSA1O1xuICAgIH0sIDIwMDApO1xuXG4gICAgcmV0dXJuIHtiYXIsIGJhen1cbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjxzdHlsZT5cbjwvc3R5bGU+XG4iLCJCYXIudnVlIjoiPHRlbXBsYXRlPlxuICA8Rm9vPlxuICAgIDxkaXY+XG4gICAgICA8ZGl2PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIHt7IGZvbyB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiB2LWlmPVwiY2hhbmdlXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9Gb28+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCBjb21wdXRlZCwgcmVmIH0gZnJvbSBcInZ1ZVwiO1xuaW1wb3J0IEZvbyBmcm9tIFwiLi9Gb28udnVlXCI7XG5cblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHtcbiAgbmFtZTogXCJCYXJcIixcbiAgY29tcG9uZW50czoge1xuICAgIEZvbyxcbiAgfSxcbiAgcHJvcHM6IHtcbiAgICBiYXI6IHtcbiAgICAgIHR5cGU6IE51bWJlcixcbiAgICB9LFxuICAgIGJhejoge1xuICAgICAgdHlwZTogTnVtYmVyLFxuICAgIH0sXG4gIH0sXG4gIFxuICBzZXR1cChwcm9wcykge1xuICAgIGNvbnN0IGZvbyA9IHJlZigzKTtcblxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgZm9vLnZhbHVlID0gMTtcbiAgICB9LCA1MDApO1xuXG4gICAgY29uc3QgY2hhbmdlID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgICAgcmV0dXJuIHByb3BzLmJhciAtIHByb3BzLmJhejtcbiAgICB9KTtcbiAgICBcbiAgICByZXR1cm4ge1xuICAgICAgY2hhbmdlLFxuICAgICAgZm9vXG4gICAgfTtcbiAgfSxcbn0pO1xuPC9zY3JpcHQ+XG4iLCJGb28udnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2PlxuICAgIDxzbG90Pjwvc2xvdD5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiAnRm9vJyxcbn1cbjwvc2NyaXB0PlxuIn0=

Steps to reproduce

  1. Open the SFC playground repro
  2. Wait a couple of seconds for the timeouts to fire
  3. Observe the error in the console

(Note: While this repro works on the playground, when I run this locally it doesn't happen in development, a local reproduction seems to require NODE_ENV=production npm run serve)

What is expected?

No error

What is actually happening?

Uncaught (in promise) TypeError: parent is null in insert

avatar
Jul 15th 2021

For information, we had a similar bug with a combination of v-for and slot which raised many error in the console and break a component when we change the v-for data. We try the propose fix at it also solves our problem.

avatar
Jul 15th 2021

The root cause:

  • Foo is placed at root of Bar
  • When Foo is mounted, the renderer did not properly enter "optimized" mode because the check only happens when patching children.
  • The first update triggers inside Foo, which performs an optimized update;
  • The 2nd update is from the outside, which causes Foo's slot content to de-opt non-optimized mode
  • The same slot content tree is thus patched first in optimized mode and then in non-optimized mode, causing the issue here.

The fix now properly checks optimized mode entry in the root patch function so that Foo is properly mounted in optimized mode -> its slots never de-optimized -> both 1st and 2nd updates are performed in optimized mode.