Unhandled error during execution of scheduler flush.

khamyl

Sep 15th 2021

Version

3.1.5

Reproduction link

Steps to reproduce

I tried to show what I am trying to do in the reproduction link, but In my real app I am getting the HTML form from server, and creating a component from it using <component :is="modal_content">. I wanted to use the form_data in the form like this <checkbox v-mode="form_data['checkedPerms']" ... > and then within the modal_content a wrote:

{                         
  template: response.data,
  data: function(){
    return {    
      form_data: {},                        
      form: new Form(form_data)   
 }}

I tried to reproduce it in the fiddle but it just doesn't work without any error (I am Vue beginner). But in my real app everything was quite ok while I tried to pass the form_data into the Form constructor.

What is expected?

Expected is that the form_data in Form object will contain the array of checked permissions.

What is actually happening?

The form is not displaying at all with the following warnings and 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/vue-next 
  at <Anonymous ref="modalContent" > 
  at <ModalPopup title="Edit role" onCloseModal=fn<bound handleClose> onSubmitPopupForm=fn<bound submitForm> > 
  at <ModalPopupRoot> 
  at <App>

Stack trace:

Uncaught (in promise) ReferenceError: form_data is not defined
    data http://127.0.0.1:8000/js/app.js:18015
    applyOptions http://127.0.0.1:8000/js/app.js:9265
    finishComponentSetup http://127.0.0.1:8000/js/app.js:13475
    setupStatefulComponent http://127.0.0.1:8000/js/app.js:13400
    setupComponent http://127.0.0.1:8000/js/app.js:13327
    mountComponent http://127.0.0.1:8000/js/app.js:11328
    processComponent http://127.0.0.1:8000/js/app.js:11303
    patch http://127.0.0.1:8000/js/app.js:10918
    patchKeyedChildren http://127.0.0.1:8000/js/app.js:11682
    patchChildren http://127.0.0.1:8000/js/app.js:11589
    processFragment http://127.0.0.1:8000/js/app.js:11292
    patch http://127.0.0.1:8000/js/app.js:10911
    patchBlockChildren http://127.0.0.1:8000/js/app.js:11212
    processFragment http://127.0.0.1:8000/js/app.js:11273
    patch http://127.0.0.1:8000/js/app.js:10911
    componentEffect http://127.0.0.1:8000/js/app.js:11506
    reactiveEffect http://127.0.0.1:8000/js/app.js:5255
    updateComponent http://127.0.0.1:8000/js/app.js:11374
    processComponent http://127.0.0.1:8000/js/app.js:11307
    patch http://127.0.0.1:8000/js/app.js:10918
    componentEffect http://127.0.0.1:8000/js/app.js:11506
    reactiveEffect http://127.0.0.1:8000/js/app.js:5255
    callWithErrorHandling http://127.0.0.1:8000/js/app.js:6395
    flushJobs http://127.0.0.1:8000/js/app.js:6624
    promise callback*queueFlush http://127.0.0.1:8000/js/app.js:6524
    queueJob http://127.0.0.1:8000/js/app.js:6518
    run http://127.0.0.1:8000/js/app.js:5396
    trigger http://127.0.0.1:8000/js/app.js:5402
    set http://127.0.0.1:8000/js/app.js:5513
    set http://127.0.0.1:8000/js/app.js:13107
    created http://127.0.0.1:8000/js/app.js:18089
    emit http://127.0.0.1:8000/js/app.js:51271
    emit http://127.0.0.1:8000/js/app.js:51271
    showForm http://127.0.0.1:8000/js/app.js:18020
    promise callback*showForm http://127.0.0.1:8000/js/app.js:18009
    1 http://127.0.0.1:8000/js/app.js:18181
    callWithErrorHandling http://127.0.0.1:8000/js/app.js:6395
    callWithAsyncErrorHandling http://127.0.0.1:8000/js/app.js:6404
    invoker http://127.0.0.1:8000/js/app.js:14480
    addEventListener http://127.0.0.1:8000/js/app.js:14430
    patchEvent http://127.0.0.1:8000/js/app.js:14448
    patchProp http://127.0.0.1:8000/js/app.js:14516
    mountElement http://127.0.0.1:8000/js/app.js:11023
    processElement http://127.0.0.1:8000/js/app.js:10995
    patch http://127.0.0.1:8000/js/app.js:10915
    componentEffect http://127.0.0.1:8000/js/app.js:11440
    reactiveEffect http://127.0.0.1:8000/js/app.js:5255
    effect http://127.0.0.1:8000/js/app.js:5230
    setupRenderEffect http://127.0.0.1:8000/js/app.js:11386
    mountComponent http://127.0.0.1:8000/js/app.js:11345
    processComponent http://127.0.0.1:8000/js/app.js:11303
    patch http://127.0.0.1:8000/js/app.js:10918
    mountChildren http://127.0.0.1:8000/js/app.js:11093
    mountElement http://127.0.0.1:8000/js/app.js:11014
    processElement http://127.0.0.1:8000/js/app.js:10995
    patch http://127.0.0.1:8000/js/app.js:10915
    mountChildren http://127.0.0.1:8000/js/app.js:11093
    mountElement http://127.0.0.1:8000/js/app.js:11014
    processElement http://127.0.0.1:8000/js/app.js:10995
    patch http://127.0.0.1:8000/js/app.js:10915
    mountChildren http://127.0.0.1:8000/js/app.js:11093
    mountElement http://127.0.0.1:8000/js/app.js:11014
    processElement http://127.0.0.1:8000/js/app.js:10995
    patch http://127.0.0.1:8000/js/app.js:10915
    mountChildren http://127.0.0.1:8000/js/app.js:11093
    mountElement http://127.0.0.1:8000/js/app.js:11014
    processElement http://127.0.0.1:8000/js/app.js:10995
    patch http://127.0.0.1:8000/js/app.js:10915
    mountChildren http://127.0.0.1:8000/js/app.js:11093

LinusBorg

Sep 16th 2021

There is no form_data variable defined, hence the error. You seem to lack a bit of understanding about a couple of things, which is fine and expected when starting out.

You can ask the community for help at chat.vuejs.org

GitHub Track