throwing in mount causes template refs to malfunction

[xanf]

Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/js-bhm79m?file=index.js

Steps to reproduce

Run an example, observe console.logs

What is expected?

testRef.value should not be null and should point to component inside#app2

What is actually happening?

testRef.value is pointing to component inside #app1 (first mount point)
or (if you had HMR) it will be null 💣

System Info

No response

Any additional comments?

if we add errorHandler to app1 via app1.config.errorHandler - error goes away

[xanf]

@LinusBorg you've tagged this one as "need more info". Indeed, my initial description was a bit wrong (that's because behavior is different when HMR takes place), I've updated reproduction and issue description with more precise information

thank you!

[LinusBorg]

Thanks. I now realize I forgot to hit the "Comment" button after setting that label. The comment would have read:

Works fine for me:

Your clarifications help, thanks. Seems weird 😅

[zhangzhonghe]

I think this is because some variable values are shared between different apps, and if the first-mounted app throws an error it may cause some variables not to be reset, which in turn causes the later-mounted app to behave in a way that is not expected.

For example, in the following code, since the mounted hook is called in flushPostFlushCbs, if it throws an error then the rest of the code will not be executed.

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

Lines 245 to 253 in 6aaf8ef

	flushPostFlushCbs(seen)
	isFlushing = false
	currentFlushPromise = null
	// some postFlushCb queued jobs!
	// keep flushing until it drains.
	if (queue.length || pendingPostFlushCbs.length) {
	flushJobs(seen)
	}