Using slot with v-if and Comment causes TypeError: null is not an object (evaluating 'e.parentNode') in PROD mode

[jeongtae]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#__PROD__eNqVVE1v2kAQ/StTX5xIYKuivaQGCWgOzaGJgFtdVcYezKbrXWs/DBHiv3d2jTGVGprc5uN53tuZ8RyCaV1HjcXgLkh0rlhtQKOx9SQVrKqlMnAAhRs4wkbJCkKChl/OuQerzZJLc0pGcRdwJR0uFbkU2oDJ1jB2hW7C8JbiSdySEQ05BquaZwbJA0gK1niDTCfDGQDLHTP5lokS1mh2iAKmA5gNIBMFzMEoVpaoNJgtwtqWUfdZoo2SopzcrLZMA9PaIkjBX0DmuSU8E/C0ePwKlSwwuiVVLfxEHzv+k92rIoeJ2tKjXmocp4HKCibTAFhBTkZGk3HrEt4eutKcPGoB+XFfhGdr5LCRqoVOVtSjaRL78Jn3Kpkr2JF5+21klPJks3eR5Rdk3n4bGUE92bwna3vbNvTkdXvT1/gwHMICK9m4mRs3vVxWFQoDO8apONv7YaNSUkUwHPZf6joTpI5tWmkwHo8hzELS8YPGPf1JUybEf/DrDj/7G5+cV7xd1tMzkvhih4NBYDTt/YaV0bOWgv6tgwNTM2RVM47qsTaM/os0uAOfcbmMc7l78DGjLA66eL7F/Pc/4s9672Jp8KRQo2owDc45k6kSTZu+X37HPdnnJI3NckJfSS5QS26dxhY2s6Ig2Rc4r/abvwI0oJW+3xsUunuUE+qQR49PA7oG8ytP7+WOok/+u1QcqYuX18QdqFfvhHY3qF3A1ybyq6H7QMxUZxR9jj6OguMfy3+TcQ==

Steps to reproduce

1. Open the provided reproduction link.
2. Click the Tab A radio button. The span with the text in A will be rendered due to the v-if directive.
3. Click the Tab B radio button. The in A span will disappear, and the span with the text in B will be rendered instead.
4. Finally, click the Tab C radio button. At this point:
   • An error will appear in the console: TypeError: null is not an object (evaluating 'e.parentNode').
   • Although nothing should be rendered (as controlled by the v-if directive), the in B span remains visible.

What is expected?

As defined in the <template> block of the reproduction example, the v-if directive should ensure that the spans are rendered or not rendered according to the specified conditions.

What is actually happening?

It appears that when clicking Tab C, the previously existing span node is not properly removed, causing the error. The error seems to occur at the following location:

core/packages/runtime-dom/src/nodeOps.ts

Lines 49 to 54 in 6eb29d3

	remove: child => {
	const parent = child.parentNode
	if (parent) {
	parent.removeChild(child)
	}
	},

Interestingly, if the comment near the first v-if directive line in the example is removed, the error does not occur.

Additionally, this issue only happens in production mode and does not occur in dev mode.

System Info

No response

Any additional comments?

This issue also occurs on v3.4.24 the lowest available version in Vue SFC Playground.

[edison1105]

This issue also occurs on v3.4.24 the lowest available version in Vue SFC Playground.

this is because the playground keeps comments in PROD mode.
It will work as expected if comments are removed in the production build.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      compilerOptions:{
        comments: false
      }
    })
  ],
})