Async function resulting in stack size exceeded using Vue

Question

So I have this method:

   async generatePP() {
      if (this.generatedhtml == null && this.generating === false) {
        console.log("generating html");
        this.loading = true;
        this.generating = true;
        const report = await window.eel.ProfilingReportTest()();
        console.log("generated");
        console.log(report);
        this.loading = false;
        this.updatePandasProfile(report)
        this.generating = false;
      } else {
        console.log("already generated or in progress");
      }
    }

Now when this method is called I get the following error:

RangeError: Maximum call stack size exceeded
    at Function.keys ()
    at _traverse (vue.runtime.esm.js?2b0e:2121)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    at _traverse (vue.runtime.esm.js?2b0e:2123)
    .
    .
    .
    at traverse (vue.runtime.esm.js?2b0e:2100)
    at Watcher.get (vue.runtime.esm.js?2b0e:4490)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554)
    at Watcher.update (vue.runtime.esm.js?2b0e:4542)
    at Dep.notify (vue.runtime.esm.js?2b0e:730)
    at Object.reactiveSetter [as generatedhtml] (vue.runtime.esm.js?2b0e:1055)
    at Store.updatePandasProfile (mutations.js?c559:64)
    at wrappedMutationHandler (vuex.esm.js?2f62:744)
    at commitIterator (vuex.esm.js?2f62:392)
    at Array.forEach ()
    at eval (vuex.esm.js?2f62:391)
    at Store._withCommit (vuex.esm.js?2f62:526)
    at Store.commit (vuex.esm.js?2f62:390)
    at Store.boundCommit [as commit] (vuex.esm.js?2f62:335)
    at Object.local.commit (vuex.esm.js?2f62:696)
    at Store.updatePandasProfileAction (actions.js?dab0:62)
    at Array.wrappedActionHandler (vuex.esm.js?2f62:751)
    at Store.dispatch (vuex.esm.js?2f62:442)
    at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:332)
    at Store.local.dispatch (vuex.esm.js?2f62:679)
    at VueComponent.mappedAction (vuex.esm.js?2f62:964)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
    at VueComponent.computedGetter [as updatePandasProfileAction] (vue.runtime.esm.js?2b0e:4836)
    at _callee$ (PandasProfiling.vue?7527:112)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:274)
    at Generator.prototype. [as next] (runtime.js?96cf:97)
    at asyncGeneratorStep (asyncToGenerator.js?fa84:5)
    at _next (asyncToGenerator.js?fa84:27)

And multiple more of similar lines of errors.

Now this function worked before when instead having this line:

this.updatePandasProfile(report)

I had simply this

this.generatedhtml = report

However I moved generatedhtml to vuex store and created getters and actions to assign that report value to the state variable:

mutations.js

  updatePandasProfile (state, html) {
    state.generatedhtml = html;
  },

actions.js

  updatePandasProfileAction(context, html) {
    context.commit('updatePandasProfile', html)
  }

getters.js

generatedhtml: state => state.generatedhtml

I'm using getter in that component where generatePP() method is called

Any idea why this might be happening?

EDIT: I also want to add that this report variable is pretty big in size (around 4,6mb)- it is a genrated html file.

Async function resulting in stack size exceeded using Vue

0 Answers