Version

3.1.2

Reproduction link

https://github.com/Anadyne/vue-router-bug-report

Steps to reproduce

1. Checkout the project
2. Install the Quasar CLI following this
3. Run with: quasar dev
4. When the browser opens automatically, open console (F12)
5. Push buttons "Foo" and "Bar" back and forth. You'll see the errors and warning in console

What is expected?

Navigation between pages should work smoothly

What is actually happening?

Many errors occur, which eventually block Router navigation and Refreshing with F5 is required to get things back to work.

Router error: [Vue Router warn]: uncaught error during route navigation:

TypeError: _ctx.status is undefined

1. This uses Quasar Framework
2. Can't reduce to a smaller size
3. The project uses Typescript
4. Navigation stucks to a page after this error occurs in production and refreshing with F5 is required which is annoying

As described in the new issue website, please open the issue on Quassar first or use the discord chat to ask questions

@posva

This has nothing to do with Quasar. I just updated our app from 3.0.10 to 3.1.2, and routing is broken now. This is a custom app with only vue and vue-router so no framework.

It is really hard to debug as Vue is of no help :disappointed:

[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/vue-next 
  at <RouterView> 
  at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
logError @ runtime-core.esm-bundler.js?5c40:211
handleError @ runtime-core.esm-bundler.js?5c40:203
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:157
flushJobs @ runtime-core.esm-bundler.js?5c40:386
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:286
queueCb @ runtime-core.esm-bundler.js?5c40:308
queuePreFlushCb @ runtime-core.esm-bundler.js?5c40:311
scheduler @ runtime-core.esm-bundler.js?5c40:2061
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set value @ reactivity.esm-bundler.js?a1e9:764
finalizeNavigation @ vue-router.esm-bundler.js?6c02:3140
eval @ vue-router.esm-bundler.js?6c02:3013
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js?6c02:2984
pushWithRedirect @ vue-router.esm-bundler.js?6c02:2957
push @ vue-router.esm-bundler.js?6c02:2915
navigate @ vue-router.esm-bundler.js?6c02:2081
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:367
runtime-core.esm-bundler.js?5c40:5726 Uncaught (in promise) TypeError: Cannot read property 'type' of null
    at unmountComponent (runtime-core.esm-bundler.js?5c40:5726)
    at unmount (runtime-core.esm-bundler.js?5c40:5644)
    at unmountChildren (runtime-core.esm-bundler.js?5c40:5772)
    at unmount (runtime-core.esm-bundler.js?5c40:5668)
    at unmountChildren (runtime-core.esm-bundler.js?5c40:5772)
    at unmount (runtime-core.esm-bundler.js?5c40:5668)
    at unmountChildren (runtime-core.esm-bundler.js?5c40:5772)
    at unmount (runtime-core.esm-bundler.js?5c40:5668)
    at unmountComponent (runtime-core.esm-bundler.js?5c40:5743)
    at unmount (runtime-core.esm-bundler.js?5c40:5644)

Furthermore, this has reported multiple times but has been closed (#3940, #3941,#3942, #3975, #3780, and more). I will try to make a reproducable case but that will take a lot of time, because our app is really big.

From my experience and looking at this huge chunk of trace it looks like something gets deleted before the unmount is called. Therefore, Vue (or router) is trying to unmout a null reference. This is a swing in the dark.

Edit:

I tested the versions and 3.1.0-beta.7 works without a problem, but 3.1.0 and above don't work. There are some other problems like element ref being null.

This is a very difficult problem, and I have encountered it.

Getting the same issue. Unfortunately as @ilicmarko mentioned, it's super hard to debug and get more context and reproduce at smaller scale because it seems like the stack trace stops in runtime-core and vue-router.

Same issue. 3.1.0-beta.7 works. 3.1.0 don't work.

Same here with:

"vue": "^3.2.41",
"vue-router": "^4.1.5",

I'm facing it everywhere, some places I've found it's related to watching route when it hasn't changed and some kind of run condition.

I boiled down the issue to this line which could simply have a conditional to prevent breaking and maybe throw a warning so it's possible to debug what's the actual issue:

const isAsyncWrapper = (i) => !!i.type.__asyncLoader;

Same here the problem with routing and change the layout in Nuxt v3.0.0 const isAsyncWrapper = (i) => !!i.type.__asyncLoader; the type is undefined