Version

3.2.20

Reproduction link

https://github.com/joleal/vueissue

Steps to reproduce

Go to localhost:8080/league and click the blue >> button

Or go to https://tmleague.leal.im/league and click the >> blue button

What is expected?

Expected to expand the table and show hidden columns

What is actually happening?

Table is expanded and columns become visible, but I get an error and after that the routes stop working.

This is the error: I get the following error:

runtime-core.esm-bundler.js?5c40:6871 [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 <FontAwesomeIcon icon="user" > 
  at <League onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {refreshPage: ƒ, showDetails: ƒ, joinLeague: ƒ, leaveLeague: ƒ, winner: ƒ, …} > > 
  at <RouterView> 
  at <App>
warn @ runtime-core.esm-bundler.js?5c40:6871
logError @ runtime-core.esm-bundler.js?5c40:7045
handleError @ runtime-core.esm-bundler.js?5c40:7037
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6991
flushJobs @ runtime-core.esm-bundler.js?5c40:7219
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:7118
queueJob @ runtime-core.esm-bundler.js?5c40:7112
eval @ runtime-core.esm-bundler.js?5c40:4640
triggerEffects @ reactivity.esm-bundler.js?a1e9:358
trigger @ reactivity.esm-bundler.js?a1e9:328
set @ reactivity.esm-bundler.js?a1e9:475
set @ runtime-core.esm-bundler.js?5c40:6328
showDetails @ League.vue?c348:209
$data.loading.Object.onClick._cache.<computed>._cache.<computed> @ League.vue?c348:36
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6988
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6997
invoker @ runtime-dom.esm-bundler.js?830f:347
runtime-core.esm-bundler.js?5c40:3340 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')
    at invokeDirectiveHook (runtime-core.esm-bundler.js?5c40:3340)
    at patchElement (runtime-core.esm-bundler.js?5c40:4207)
    at processElement (runtime-core.esm-bundler.js?5c40:4075)
    at patch (runtime-core.esm-bundler.js?5c40:3992)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4608)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at updateComponent (runtime-core.esm-bundler.js?5c40:4472)
    at processComponent (runtime-core.esm-bundler.js?5c40:4405)
    at patch (runtime-core.esm-bundler.js?5c40:3995)
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4310)

The jsfiddle is a replica of the code, of the component where I get the error, but it doesn't include everything. I'm happy to share the github repo, but there is a bit of setup required so it's quite hard to reproduce.

Everything in the page works as expected, but as soon as I expand the table, I get the error message. You can see it working in here (no sign up required) by clicking the >> blue button:

https://tmleague.leal.im/league

In the codepen, I can't reproduce the error. I clicked on the red "show" as well as the button on the bottom. Am I missing something or are you aware of this?

In the original error message, the error happens in <FontAwesomeIcon>, it it might be required to reproduce the issue.

OK, let me prepare a cut-down version of my project where we can see the issue

The error seems related to a directive (custom or built-in, like v-show, v-model ...). it fails here, according to the stack trace:

https://github.com/vuejs/vue-next/blob/2937530beff5c6bb57286c2556307859e37aa809/packages/runtime-core/src/directives.ts#L132

I've created a repo where the issue can be reproduced. Let me know if you need any additional information.

Thanks!

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground. Open a new issue once you have that boiled down repro. Remember to use the forum or the Discord chat to ask questions!