Vuex state loads forever

[mtimoustafa]

Version

5.0.9

Browser and OS info

Chrome 73 / MacOS High Sierra

Steps to reproduce

1. Navigate to a Vue project page that uses a Vuex state.
2. Open Vuex dev tools.
3. Switch to Vuex tab.

What is expected?

The Vuex state should appear in the pane.

What is actually happening?

At the bottom of the pane, the Vuex state does not appear. Instead, a message saying "Loading state..." along with a spinner appear, but that's it.

---

Another issue has been opened a while ago describing the same issue (#773). The thread says the problem has been fixed, but others (including myself) are still experiencing that issue.

[JiaboHou]

I'm also experiencing this with version 5.0.9 on Firefox 66.0.3

[Akryum]

Please provide a minimal runnable reproduction.

[cthorne91]

This was happening for me but I was able to fix it. Hopefully this helps somebody.

I noticed that when I would click the 'Load state' button from the Vuex tab in the Vue dev tools, I would get an error in the console. That made me realize that when you click Load state, all the getters for all the modules run, which makes sense, but one particular getter was being called and operating on un initialized state. Basically I was accessing properties on null and this stopped vue dev tools from loading the state.

Once I fixed the failing code it worked. I never noticed these issues in production because all the initialization would have been set up by the time the getters were used, but the dev tools forced the getters to execute before I was expecting them to.

[mtimoustafa]

Thanks for your comment @cthorne91! That was the issue for me as well 🙂

I do feel like there should be some sort of UI feedback in the Vuex pane, instead of quietly printing an error in the console. It's very easy to miss the error and waste time trying to figure out the problem.

The visual feedback can be like the Open Vue devtools to see component details message that pops up at the bottom of a page when you right click and select Inspect Vue component. We can do something similar inside the Vuex pane, maybe?

[mtimoustafa]

I opened a feature request issue so this problem can go through a more visible route. I'm gonna keep this issue open as well for more visibility.

[ao10]

I'm also experiencing this issue on Chrome 72.0.3626.119 and macOS High Sierra v10.13.6

[mtimoustafa]

So I looked into this issue a bit more in my Vue project, and it turns out that the store load error I'm getting doesn't seem to be coming from my project at all. I'm using modules in my store, but when loading the store breaks, the error is Cannot read property <module name> of undefined. When I remove that module, the same error appears, but with another module name. Removing all the modules just makes dev tools repeat the last error it threw on store load.

So I went and I poked into the original issue that complained about this bug (#773), and I noticed the affected version was 5.0.0-beta.3. I poked into the release notes, and version 5.0.0 refactors vuex snapshots quite significantly.

I suspected this version might've broken something, so I built an older version of Vue dev tools (4.1.5) to see if the store loads there. Sure enough, without any problems and without any changes to my project at all, the store loads fine!

@Akryum I understand that having a reproduction of the issue is very helpful for troubleshooting. I tried to make a minimum runnable reproduction of this issue on latest Vue dev tools, but I couldn't get it to show up with a simple store (or even a store with modules). However, judging by the sheer number of users affected by this issue for such a long time, and that a version revert fixes the issue, we'd appreciate it if someone could take a look at this.

If anyone was able to reproduce the issue on something they can post publicly, it'd be much appreciated if you could share it with us!

Alternatively, if there's a way of getting around that error on >5.0.0 or that there were updates to Vuex that should be taken into account to avoid it, I'd love to hear about it 🙂

[halfpastfive]

Hi,

I opened a similar issue here : #971 . I seems that, in some cases, mutations are replayed on state loading, but their payload is altered (in my case, a geolocation.Position object).

The issue contains a repo that reproduces the crash using geolocation.watchPosition().

[mtimoustafa]

Thanks for fixing the issue, much appreciated! 🎉

[samiconductor]

Here's the error I'm getting for 5.1.0. The odd thing is the exception is not always thrown which means it may be a timing issue? I can refresh and load state and repeat if exception until eventually it works.

backend.js:14674 Uncaught TypeError: Cannot read property 'auth' of null
    at vuex.esm.js:770
    at Array.reduce (<anonymous>)
    at getNestedState (vuex.esm.js:770)
    at Object.get (vuex.esm.js:681)
    at wrappedMutationHandler (vuex.esm.js:714)
    at backend.js:14664
    at Array.forEach (<anonymous>)
    at VuexBackend.replayMutations (backend.js:14664)
    at VuexBackend.onInspectState (backend.js:14355)
    at Bridge.emit (backend.js:5472)

Where auth is a module name (the first module) and the exception is happening here due to state being null when it tries to get state[key]

function getNestedState (state, path) {
  return path.length
    ? path.reduce(function (state, key) { return state[key]; }, state)
    : state
}

[nathanaelphilip]

I’m getting a TypeError: value is null which causes the loading to spin. I’m not sure why that value is null, it’s being set properly – even when I hard code it.

This is only in FF. Chrome works perfectly.

[eigan]

Here is my trace:

TypeError: state is null             
    nameOfFirstMutationInApp store.ts:153
    wrappedMutationHandler vuex.esm.js:725
    replayMutations backend.js:14664
    forEach self-hosted:262
    replayMutations backend.js:14664
    onInspectState backend.js:14355
    onInspectState self-hosted:985
    apply self-hosted:4638
    emit backend.js:5472
    _emit backend.js:5172
    Bridge backend.js:5097
    forEach self-hosted:262
    Bridge backend.js:5097
    listener backend.js:2568

EDIT: Uncheck "New vuex backend" will let me see the state.