Uncaught TypeError: object is undefined

[G-Bro]

Version

5.0.2

Browser and OS info

Chrome 73 / Windows 10, Firefox 67 / Windows 10

Steps to reproduce

Register a nested Vuex module like so

globalStore.registerModule(['dialogs', 'snackbars'], store);

and then open Vue devtools

What is expected?

The Vuex tab of devtools should show dialogs->snackbars->{}

What is actually happening?

All Vue devtools tabs are empty, except for the components tab. Essentially this completely breaks the devtools

---

This appears to be the same bug as in #919, but takes place a little further down the chain

The actual error takes place in backend.js, in the 'set' function, line 657

I have also tried using the standalone Electron Vue dev tools, but they have the same issue.

[devan1011]

Not sure if it's related to this bug (I was having this issue above before), but after the update to 5.0.2 the Vue app crashes on boot if the dev tools are installed. Chrome performance monitor says 100% CPU usage (For the tab).

[Akryum]

@DanEvans485 Please open a new issue with a runnable reproduction so I can look at this.

[Akryum]

@G-Bro Please provide a runnable reproduction and actual error traces. I can register a nested dynamic module without issue.

[G-Bro]

@Akryum I have found a few scenarios where registering Vuex modules appears to break the Vue devtools. I have outlined below some of the methods that do and don't work.

In each of these cases, the dialogs.snackbars module functions within Vue itself, but not within the Vue devtools

Scenario 1: Dynamic module registration with an empty object

❌ Breaks devtools

if the parent module is also registered dynamically then the devtools break

globalStore.registerModule(['dialogs'], {});
globalStore.registerModule(['dialogs', 'snackbars'], store);

Scenario 2: Static module registration with an empty object

✔️ Works

if the parent module is registered during the initialisation of Vuex like below, there are no issues

modules: {
  ...
  dialogs: {},
},

Scenario 3: Dynamic module registration with an module object

✔️ Works

Registering the module dynamically works so long as there is a 'state' property in the module object

globalStore.registerModule(['dialogs'], {
    state: {},
});

Scenario 4: Dynamic module registration with a generic object

❌ Breaks devtools

Registering the module dynamically with a non-empty object does not work if the object doesn't meet Vuex module structure

globalStore.registerModule(['dialogs'], {
    a: 1, b:2, c: 3,
});

Here is the trace from the Firefox console when registering the dialogs.snackbars module in scenarios 1 and 4

TypeError: object is undefined backend.js:657:5
    set moz-extension://b88b1336-4719-4558-8704-3aca02c304bb/build/backend.js:657
    initVuexBackend moz-extension://b88b1336-4719-4558-8704-3aca02c304bb/build/backend.js:11850
    forEach self-hosted:262
    initVuexBackend moz-extension://b88b1336-4719-4558-8704-3aca02c304bb/build/backend.js:11842
    connect moz-extension://b88b1336-4719-4558-8704-3aca02c304bb/build/backend.js:1472
    initBackend moz-extension://b88b1336-4719-4558-8704-3aca02c304bb/build/backend.js:1382
    handshake moz-extension://b88b1336-4719-4558-8704-3aca02c304bb/build/backend.js:2696

I hope that helps.

[Akryum]

I couldn't reproduce this error even on scenarios 1 and 4. Could you share a runnable reproduction?

[anisiewicz]

version: 5.0.3
After some experimentation, I think the problem is with unregisterModule used with nested modules.

this.$store.registerModule(['bar'], {state:{}})
this.$store.registerModule(['bar', 'foo'], {state:{}})
this.$store.unregisterModule(['bar', 'foo'])

Result:

Uncaught TypeError: Cannot set property 'foo' of undefined
    at set (backend.js:657)
    at earlyModules.forEach (backend.js:11850)
    at Array.forEach (<anonymous>)
    at initVuexBackend (backend.js:11842)
    at connect (backend.js:1472)
    at initBackend (backend.js:1382)
    at handshake (backend.js:2696)

[blu14x]

Not sure if this is related, but changing data on deep nested objects via components tabs throws TypeError.

For example:
changing the string 'site' within:

coupon: {
    code: "example"
    client: {
        site: "https://www.example.com/"
    }
}

Throws: "TypeError: Cannot read property 'client' of undefined"

changing the string 'code', works without problems.