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
      }
    })
  ],
})

[jeongtae]

@edison1105

Thank you for your response.

In fact, my company encountered a bug related to this issue, and it took several hours of debugging to pinpoint the root cause. Identifying the issue was particularly challenging because it was difficult to imagine that an HTML Comment Node could influence Vue’s rendering behavior.

For now, we’ve applied the suggested option across all Vue-based products in our company to prevent this issue.

That said, upon further consideration, there might be cases where HTML comments are intentionally used in some way. Given that Vue’s default configuration does not remove comments, it would be ideal if this issue could be resolved without relying on the option to disable comments.

Thanks again for the clarification!

[alex-snezhko]

This appears to have been fixed in version 3.5.14