Subscribe on changes!

KeepAlive & root text node: Failed to execute 'insertBefore' on 'Node'

avatar
Oct 11th 2022

Vue version

3.2.40

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UU1vwjAM/SteLh0Sbe6oTJt23o1jLqW4JdB8KEnLJtT/PqfpGGNST4nt52c/vyt7s7YYemQbVvraSRvAY+jti9BSWeMCXMFhAyM0zijICJrdSh9f70fZHeZSwec48hEIQOjaaE+MR3OBbeR5Dq7HVayUPI2jQRQEVLarAlIEUO77EIyG17qT9Xkr2Nz/FF/BJgzAzrRthxOep4bUfEa0edXJIZFR5mfNIZfNzCYY8ATnf/Alv23C1izJzFVli5M3mm50nWTNBS/YBqZMzJHoGAt2DMH6Dee+qeMlTr4wruX0K1yvg1RYoFf53pmLR0fEgq3vODglB3S5Q31Ah26J8wH6jzfSjkKPJOXOmkeroat0S3eJepZt/3U04GeYHc2y1ZKbO0LSU0pt+0AWKHPALk6L+eTC3dGFZuM31MziVQ==

Steps to reproduce

  1. Type something in the <input>.
  2. Click the Toggle button.
  3. Observe error.

What is expected?

No error.

What is actually happening?

Error in console, rendering update fails.

Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

System Info

No response

Any additional comments?

  • Happens in both dev and production mode.
  • Seems to have been a problem for a while, it isn't new in 3.2.40.
  • The root text node in the child seems to be required to cause the problem.
  • If you don't type anything in the <input>, everything seems to be toggle fine. I assume some internal state is getting changed by the first re-render that breaks the second re-render.