Nested routes + <Suspense> triggers Vue unhandled error

[danielroe]

Version

4.0.12

Reproduction link

stackblitz.com

Steps to reproduce

When there are nested routes in which each nested RouterView has its own Suspense, navigating again before suspense resolves triggers a Vue internals bug.

Click the navigate button multiple times in succession. You should see the following errors:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <RouterView> 
  at <App>

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
  at parentNode (runtime-dom.esm-bundler.js:35:30)
  at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5109:17)
  at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
  at callWithErrorHandling (runtime-core.esm-bundler.js:155:36)
  at flushJobs (runtime-core.esm-bundler.js:394:17)

What is expected?

I'm expecting that there would not be an error.

What is actually happening?

There is an error.

---

I'm raising this here but please let me know if you think this isn't an issue with the router and is in fact a vue core bug.

[posva]

This reminds me of an error with Suspense in core but I couldn't find the issue. I will have to take a look see if it's specific to router. This will be necessary for onBeforeNavigate()

[danielroe]

(Possibly) related issue: nuxt/nuxt#13350 (which occurs if you add <Transition> around the component, as recommended here: https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components

[posva]

Managed to reproduce with a smaller version without Vue Router:

• Click on Show Async and wait for it to load
• Click on Show Sync and then Show Async again
• Check the error in the console

Ideally, there should be a way to pin the provided route at the RouterView level so all nested routes use the correct version of the route. Something like this but that also handles nested routes correctly (I think this workaround wouldn't work when having multiple async children: see sfc)

[zigomir]

We've hit this error in our app too. I tried using vue-router with multiple nested RouterViews and a <Suspense> in the root component.

I'm looking at your linked workaround above (const current = depth > 0 ? fixed[depth] : route.value[depth]) and I'm wondering if vue-router can be patched or we can only wait for this to be fixed in vuejs/core?

[zigomir]

Seems like this has been fixed with vuejs/core#6736
I'll take a look and see if I can confirm.