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

Nested routes + <Suspense> triggers Vue unhandled error #1319

Open
danielroe opened this issue Feb 23, 2022 · 6 comments
Open

Nested routes + <Suspense> triggers Vue unhandled error #1319

danielroe opened this issue Feb 23, 2022 · 6 comments
Labels
bug Something isn't working external This depends on an external dependency but is kept opened to track it feat:suspense

Comments

@danielroe
Copy link
Member

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

posva commented Feb 23, 2022

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

danielroe commented Feb 23, 2022

(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 posva added bug Something isn't working feat:suspense labels Feb 25, 2022
@posva
Copy link
Member

posva commented Feb 28, 2022

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

zigomir commented Apr 2, 2022

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?

@m430

This comment was marked as spam.

@posva posva added the external This depends on an external dependency but is kept opened to track it label May 29, 2022
@zigomir
Copy link

zigomir commented Apr 24, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working external This depends on an external dependency but is kept opened to track it feat:suspense
Projects
Status: 💬 In discussion
Development

No branches or pull requests

4 participants