Version

3.2.18

Reproduction link

codesandbox.io

Steps to reproduce

See the linked code sandbox.

I have been struggling with this error, inside a large production system, where we have a small part of the page that is server-side rendered with ASP, and hydrated by Vue on the client side. I managed to create a minimal reproduction at code sandbox. The key is that there is a wrapper component, with a slot inside, and the content of the slot is initially hidden with v-if. The hydration completes without errors, but when the client later tries to show the hidden section, we get this exception.

What is expected?

Hover the page should show the hidden part, without exception

What is actually happening?

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

Cannot read properties of null (reading 'nextSibling')

It seems that delete the comments could work fine.

index.html:

<div id="app"><!--[--><div>Hover me</div><!--[--><!--]--><!--]--></div>    ==>   <div id="app"><div>Hover me</div></div>

@ygj6 No, the comments are inserted by SSR to provide information about template boundaries for the hydration. If you remove them, hydration fails which is reported in the console:

Hydration completed but contains mismatches.

Update: I've reversed engineered Vue SSR, to figure out where to put these comments, in order for hydration to succeed. However, the issue might still be related to those comments. Even though the hydration appears to be successful, there might be something that is missed in the SSR output, and is causing the problem.

@ropez as a workaround use v-show instead. see https://codesandbox.io/s/immutable-wildflower-2ceft?file=/public/index.html

Maybe should avoid catch BlockTree if patchFlag is bail.

Looks like I stumbled over this too with VuePress v2.

What makes me headaches - it does work on some builds and sometimes not but didnt change any packages. Just rebuild the page.

EDIT: I've disabled webpack file-cache and the problem seems gone