Vue-devtools: Vuex state issue with registerModule

[xereda]

Version

5.0.0-beta.4

Browser and OS info

Chrome 71.0.3578.98 64 bits / Arch Linux

Steps to reproduce

In an app with store, access the Vuex tab.

What is expected?

Access state data.

What is actually happening?

The application crashes when we use version 5 beta 4.

---

Below are two simulations. One with version 4.1.5 and another with the new version 5.beta4.

version 5.beta.4:

version 4.1.5:

[Akryum]

Please try only enabling one version of the devtools at a time.

[Akryum]

Also an actual runnable reproduction is needed.

[xereda]

Yes I did it. I left the two enabled just to make it easier to burn the gif.

[xereda]

Also an actual runnable reproduction is needed.

The above two gifs are not good?

[xereda]

I did a simulation of the same application. Each simulation with a unique and exclusive version of vue devtools. Note that in version 5.beta4, the state object is not displayed.

[xereda]

_[version 5 beta 4]_

[xereda]

_[version 4.1.5]_

[xereda]

The state object, as well as getters, does not appear in the new version:

[wanxe]

Same here! @xereda
I think that is a problem with the modules and async modules. Because if you test just with an "standard store" configuration it works fine.

[xereda]

Same here! @xereda
I think that is a problem with the modules and async modules. Because if you test just with an "standard store" configuration it works fine.

I do not know if I understand. @wanxe

You mean it's not working with namespace modules?

[sp1ker]

Can you create public repo with reproduction this problem?

[xereda]

@Sp1ker The application depends on several features only available on our intranet.

[Akryum]

Maybe you can reproduce your problem with a similar architecture but with simplified content.

[Akryum]

Also if you could provide the full error trace with line numbers etc. I's rather difficult to read on animated gifs.

[xereda]

@Akryum I tried to simulate with a new project, with the vue cli, but there are no problems. Same namespaced modules added.

The point is that the entire set may be necessary. But this will not be possible to simulate outside of our intranet. There are dependencies of various services.

I'm really excited about vue devtools version 5 beta 4, but I think I'll stay out of it.

[xereda]

No error occurs. Only it can not load the state. If I click on the first MUTATION of the timeline, the state is loaded. In others, it does not.

I use gifs because it is the closest way to simulate the situation for you.

[xereda]

I know it's not the best scenario to test this, but that's what I can do.

I'll send as many details as I can.

Note the following gif. In the first mutation I have access to the state correctly.
If I click on the other MUTATIONS, the state is not displayed.

[xereda]

The error that appears in the console does not occur when I am using vue dev tools 4.1.5.

  I'll detail this error below. Maybe some detail will help.

easy.js?4959:116556 Uncaught TypeError: Cannot set property 'currentPath' of undefined
    at Store.setCurrentPath (easy.js?4959:116556)
    at wrappedMutationHandler (vuex.esm.js?358c:697)
    at mutation.handlers.forEach.handler (backend.js:9818)
    at Array.forEach (<anonymous>)
    at replayMutations (backend.js:9818)
    at Bridge.bridge.on.index (backend.js:9777)
    at Bridge.14.EventEmitter.emit (backend.js:1530)
    at Bridge._emit (backend.js:1439)
    at messages.forEach.message (backend.js:1383)
    at Array.forEach (<anonymous>)
setCurrentPath @ easy.js?4959:116556
wrappedMutationHandler @ vuex.esm.js?358c:697
mutation.handlers.forEach.handler @ backend.js:9818
replayMutations @ backend.js:9818
bridge.on.index @ backend.js:9777
14.EventEmitter.emit @ backend.js:1530
_emit @ backend.js:1439
messages.forEach.message @ backend.js:1383
Bridge.wall.listen.messages @ backend.js:1383
listener @ backend.js:1337
postMessage (async)
o @ proxy.js:1
EventImpl.dispatchToListener @ VM3680 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM3686 extensions::utils:138
EventImpl.dispatch_ @ VM3680 extensions::event_bindings:387
EventImpl.dispatch @ VM3680 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM3686 extensions::utils:138
dispatchOnMessage @ VM3687 extensions::messaging:392

[wanxe]

Same here! @xereda
I think that is a problem with the modules and async modules. Because if you test just with an "standard store" configuration it works fine.

I do not know if I understand. @wanxe

You mean it's not working with namespace modules?

Exactly.

[xereda]

@wanxe I created a project with namespaced modules. There were no problems.

[Akryum]

If think he meant dynamically registered modules with store.registerModule.

[xereda]

@Akryum @wanxe The modules I maintain are registered manually. But the application is a suite of modules. So, before my module, it has the store of the framework and it is registered dynamically.

[xereda]

I just ran a test and version 5 beta 4 is not considering dynamically registered modules.

I made a repository available with the simulation. Just clone it and run the dev environment.

https://github.com/xereda/vue-devtools-5

[sp1ker]

It's not work in 4.1.5.
Its "work" only on <250ms registerModule. After 250ms modules will not shown in devtools too:

importState: debounce(function (e) {
      // ....
      }
}, 250)

For correct work registerModule seems be like a mutations with history and revert or replay. Like a Base State item.

[xereda]

@Sp1ker

Thank you so much for the help. The issue is that I did not really understand why the same dynamic had its state presented in version 4.1.5 and not presented in version 5 beta 4. This without my intervention. It only always works in version 4, but not in version 5.

[xereda]

@Sp1ker @Akryum

In both simulations:
  - The same project;
  - The same states;
  - The same dynamic store and being created at the same point;
  - For both simulations, I did not make any changes;

Considering the facts above. I did not really understand the difference that causes the presentation in version 4.1.5, but it does not let you present in the new beta version (5 beta 4).

[sp1ker]

@xereda

Considering the facts above. I did not really understand the difference that causes the presentation in version 4.1.5, but it does not let you present in the new beta version (5 beta 4).

Replace it in your repo:

this.$store.registerModule('dynamicVuexModule', dynamicVuexModule); 

with:

setTimeout(() => {this.$store.registerModule('dynamicVuexModule', dynamicVuexModule)}, 500)

It's not work on 4.1.5 too.

Now devtools dont work with registerModule. Seems need change vuex code too for correct work (need some hooks).

[xereda]

It's not work on 4.1.5 too.

registerModule works fine in version 4. Even without applying debounce in the method.

Did you see the latest animated gif simulation I did? It illustrates this well.

I do not understand why you claim that it does not work on Vue Dev Tools version 4.

[xereda]

@Sp1ker There are no problems with your English. :smiley: Thanks for the engagement. I'll wait for a return from @Akryum.

[ffxsam]

I'm having this issue too. I'm registering a module inside a Vue plugin, and while I can click a component and check my state via $vm0.$store.state.myPlugin and that works, I cannot use the Vue DevTools UI to look at the state.

Also, in my mutation function, the state argument is undefined.

[laander]

Same here, new beta throws the error @ffxsam posted when calling store.registerModule (inside a Vue plugin)

[laander]

@Akryum How come you closed the issue? Because you don't believe there's an issue or because a fix already has been implemented?

[przemkow]

@laander there is a link to the commit which fix this issue, next to the ticket status change.
https://github.com/vuejs/vue-devtools/commit/ba8b349063ccaf9598d778d977f907ffb385817b

[xereda]

Is there any deadline for this to be released in an upcoming version of the extension?

[sp1ker]

@xereda 5.0.0 beta 5 was released

[xereda]

with This fix?

[laander]

@przemkow Ah, of course. Head full of porridge, my apologies 🙈