Disabled teleport inside fragment causes SSR hydration mismatches

[KaelWD]

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV____SSR__eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBDb21wIGZyb20gJy4vQ29tcC52dWUnXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8ZGl2PlxuICAgIFBhcmVudCBmcmFnbWVudFxuICA8L2Rpdj5cbiAgPENvbXA+PC9Db21wPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNy9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM3L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkNvbXAudnVlIjoiPHRlbXBsYXRlPlxuICA8VGVsZXBvcnQgZGlzYWJsZWQgdG89XCJib2R5XCI+XG4gICAgPGRpdj5cbiAgICAgIFRlbGVwb3J0IGNvbnRlbnRcbiAgICA8L2Rpdj5cbiAgPC9UZWxlcG9ydD5cbjwvdGVtcGxhdGU+In0=

Steps to reproduce

N/A

What is expected?

No warnings

What is actually happening?

Hydration completed but contains mismatches with no information about where they are.

core/packages/runtime-core/src/hydration.ts

Lines 494 to 501 in 11e17a1

	} else {
	// fragment didn't hydrate successfully, since we didn't get a end anchor
	// back. This should have led to node/children mismatch warnings.
	hasMismatch = true
	// since the anchor is missing, we need to create one and insert it
	insert((vnode.anchor = createComment(`]`)), container, next)
	return next
	}

This newly inserted anchor can then cause Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom in its parent element.

System Info

No response

Any additional comments?

Having a separate warning for "fragment didn't hydrate successfully" would be nice too.

[KaelWD]

b60cff0 didn't account for disabled teleport, nextNode is the teleport content instead of <!--teleport end-->

[xvaara]

For those finding this bug here is a workaround component that just skips teleport if it's disabled:

https://play.vuejs.org/#__DEV____SSR__eNqNVDtv2zAQ/iuEFjuALQ3ppCqPpsjQDk2QeIsy0NLZlkuRBEk5Dlz99x5PT9sJkEUk7/ndfXc6BD+0DncVBHGQ2MwU2jELrtLXqSxKrYxjP1Wp2cqokk3CyD+8+SSVSdTYoyU+HJRacAf4YizJix1dGHvkBqRDf74u8ULaqFMnPtx1QlFRkER9lGAWNOnnJdfh1iqJAA/eJ20VNg1iRhIvQ0j+nQYb57SNoyjLJbrlIIqdCSW4SOoyukWzyFTSFSXMc1XeXoaX4TeEY91YHIIt50uj3iwYDJIGs1GaCIU7MHMsKwcD5qtpT9zGqU9UZ+l99jqVNTal67+n67jlC7UAAcQYBuVLATlz6ioNlip/T4OWjhEzjPUOmZKuJeeInmgIekwPPj4elhGKbmQGEQ3O99HkYEHOYvJVsT7hOMM6CwHmQbtCyWOuuRDq7TfJnKmgJyfbQPb3A/nW7huSHg1Qq0eEOm7W4Br1/fMf2OO9V5Yqr0Q7V58on8AqUXmMjdldJXOEPbIjtL+oO4VcL+z9Hlttu6I8UKKX7GnAPMWflT7AxfEZjcVxj0e7LLhc4wz4bRlIonA5rApJyZRE7in/hr7uXQN7NEov8DJIntrxvBfgN5kUXVZ81C3hzc8hlbBvZhFWvBJ0jtNNCYPkJcRsMqCfUFSNuW1ftVP9tUESs5dnZ7CZM/aw3ELmXhm3PeDEko79OwWMElkJgQdyRGjy65Yl6oaHGZNJK204QV27Tmcw7pQSwOV5kBUXtpu/JkrzpWWZUnkzdrBCOTy5c8bWF11wgzZGsukFu+oXlTzCDkcnZeyGUYywTXwTTi8GZcw2054fdvBtbOI4Vc/Yy5nnK/l6oDXeRn/3oP4PXN8PQw==