Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Josepdal opened this issue Jan 12, 2024 · 21 comments · Fixed by #10184
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working scope: suspense

Comments

@Josepdal
Copy link

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.

image

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
Copy link

WenisOK commented Jan 12, 2024

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

@droni-co
Copy link

droni-co commented Jan 12, 2024

Same error in nuxt 3.

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

"vue": "3.3.8",

@davision
Copy link

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
Copy link

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
Copy link

c-schwan commented Jan 12, 2024

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

@urbgimtam
Copy link

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

@dethdkn
Copy link

dethdkn commented Jan 13, 2024

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
Copy link
Author

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

@2556227850
Copy link

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

在nuxt3.91没有修复

@djixadin
Copy link

djixadin commented Jan 15, 2024

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

@AnzhiZhang
Copy link

在nuxt3.91没有修复

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

@LinusBorg
Copy link
Member

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
Copy link

WenisOK commented Jan 16, 2024

在nuxt3.91没有修复

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

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

@Dream403
Copy link

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

Thanks for this answer, it solved my problem

@ferferga
Copy link
Contributor

ferferga commented Jan 18, 2024

@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:

image

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:

image

  • ReactiveEffect.componentUpdateFn:

image

  • ReactiveEffect.run:

image

  • instance.update

image

  • updateComponent

image

  • processComponent

image

  • patch

image

  • patchKeyedChildren

image

  • patchChildren

image

  • processFragment

image

@ferferga
Copy link
Contributor

ferferga commented Jan 18, 2024

@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
Copy link

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
Copy link
Member

edison1105 commented Jan 22, 2024

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
Copy link

@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 edison1105 added ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Feb 8, 2024
@edison1105
Copy link
Member

@ennioVisco Agreed

@maximilianschmid
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. 🐞 bug Something isn't working scope: suspense
Projects
None yet
Development

Successfully merging a pull request may close this issue.