[Bug Report][3.4.11] Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

[Josepdal]

Vue version

3.4.11

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-n6ky34

Steps to reproduce

Error when using navigation.

What is expected?

No errors, navigate to other page.

What is actually happening?

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (chunk-FRWRVS7C.js?v=e55eeb5e:9605:30)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-FRWRVS7C.js?v=e55eeb5e:7513:11)
    at ReactiveEffect.run (chunk-FRWRVS7C.js?v=e55eeb5e:421:19)
    at instance.update (chunk-FRWRVS7C.js?v=e55eeb5e:7553:17)
    at callWithErrorHandling (chunk-FRWRVS7C.js?v=e55eeb5e:1634:32)
    at flushJobs (chunk-FRWRVS7C.js?v=e55eeb5e:1841:9)

The error stops the execution of the page and does not let you navigate.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 Intel(R) Core(TM) i9-14900KF
    Memory: 36.76 GB / 63.85 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.9.2 - ~\<privacy-deleted>\node_modules\.bin\npm.CMD
  Browsers:
    Chrome browser: 120.0.0.0

Any additional comments?

Reproduction page (v3.4.10 - working)

https://stackblitz.com/edit/nuxt-starter-an2gkf

Reproduction page (v3.4.11 - not working)

https://stackblitz.com/edit/nuxt-starter-n6ky34

[WenisOK]

This bug appears to affect nuxt, see nuxt/nuxt#25179

[droni-co]

Same error in nuxt 3.

My temporal solution was set Vue version fixed in my package json

"vue": "3.3.8",

[davision]

This one almost made my head explode today, breaking my static pages based on Nuxt. But it is good to know that it was not my fault :)

[ItsMeDelanoDev]

Same error in nuxt 3.

My temporal solution was set Vue version fixed in my package json

"vue": "3.3.8",

For me this only worked properly after putting it in the resolutions segment of my package.json. Still holding my fingers crossed for this to be solved within the weekend 🙈

"resolutions": {
  "vue": "3.3.8"
},

[c-schwan]

"vue": "3.4.8" not "vue": "3.3.8"

[urbgimtam]

Just to add that another symptom is the "Vue DevTools" extension also stops working.

[dethdkn]

Mine worked just by downgrading to 3.4.10, I guess its a 3.4.11 thing.
Hope they fix it asap 🙏

"devDependencies": {
	"vue": "3.4.10"
},
"overrides": {
	"vue": "3.4.10"
}

[Josepdal]

I confirm that it has been fixed. Everyone upgrade to v3.4.13 👏🎉

[2556227850]

我确认它已被修复。大家升级到v3.4.13👏🎉

在nuxt3.91没有修复

[djixadin]

still not fixed when having multiple layouts. reverting to 3.4.8 fixes it and it doesn't work on 3.4.9

[AnzhiZhang]

在nuxt3.91没有修复

this is not related to this issue, please discuss it in relevant repo

[LinusBorg]

still not fixed when having multiple layouts. reverting to 3.4.8 fixes it and it doesn't work on 3.4.9

Create a repro, open an issue, and we can check it out. Thanks.

[WenisOK]

在nuxt3.91没有修复

this is not related to this issue, please discuss it in relevant repo

已经被修复了，目前看着3.4.14，没有任何问题

[Dream403]

当有多个布局时仍然没有修复。恢复到 3.4.8 可以修复该问题，但在 3.4.9 上不起作用

Thanks for this answer, it solved my problem

[ferferga]

@djixadin I was also experiencing the same issue consistently in my app, so I downgraded to 3.4.8 while had some time to investigate.

I was not able to reproduce it in the playground with the same structure of my App (Suspense + Transition), but I could trace it down to this exact commit: bcda96b

@LinusBorg Can we reopen the issue? cc @edison1105

This is the stacktrace in a unminified production build matching exactly that commit:

Full stacktrace and details about my app

The affected logic is here

To reproduce:

• Go to the repository > Code > Create codespace on master
• Wait for the Codespace to load and cd into frontend.
• Run npm remove vue && npm i vue to install latest vue
• Access the app and open the console to see errors in real time.
• At the Add server screen type exactly https://demo.jellyfin.org/stable and hit continue.
• Attempt to access with the demo user (instructions are provided on screen). When hitting the login button, the entire app will get into a borked state and will not be navigable anymore and in console the above stacktrace will appear.

There are no issues with Vue 3.4.8

This is the stacktrace of the elements displayed in the screenshot, where I don't see anything out of the ordinary, but I'm attaching in case they're helpful. If I go deep down to where the app is mounted, there's nothing out of the extraordinary, the patch loop is the same.

• parentNode:

• ReactiveEffect.componentUpdateFn:

• ReactiveEffect.run:

• instance.update

• updateComponent

• processComponent

• patch

• patchKeyedChildren

• patchChildren

• processFragment

[ferferga]

@djixadin Can you confirm if you're using Suspense in your app to triage this issue down further?

From Nuxt repo, it looks like that all the people who are still experiencing this are also using Suspense: nuxt/nuxt#25214

[djixadin]

Yes i am, it is on by default. I wasn't able to reproduce it at the time but as stated here by the fine gentleman is that the problem is in promises not resolving before navigating nuxt/nuxt#25214 (comment)

[edison1105]

The same error happens when you're switching between pages that has the while a promise is still resolving.
Happens even when only using default layout and even with a single root node inside page templates. No workaround available for this one im afraid.

Reproduction here: Try switching fast between the 2 pages before the promise is resolved. Observe error in console.
stackblitz.com/edit/nuxt-starter-dtnaui

@ferferga
Sorry, I've been busy recently. I just saw it. It can be reproduction.
Open this one and I will take a further look later.

Edit
simple reproduction

[ennioVisco]

@edison1105 I'd like to mention that this is not a minor bug, this currently breaks navigation for any nuxt version, as you can see in the related PR.
I'd strongly advise to raise the urgency of the issue and, possibly, add a test to the Ecosystem CI

[edison1105]

@ennioVisco Agreed

[maximilianschmid]

@yyx990803 Vue 3.4.20 fixes this issue for me. THX!