An error occurred in hook getInspectorState if vuex module has / in the key

[migueldavila]

Version

6.0.4

Browser and OS info

firefox 96.0.3 (64-bit) / windows 10

Steps to reproduce

choose vuex modules drops the below error

What is expected?

show the vuex store

What is actually happening?

drops an error

[johuhype]

Got the same problem.
Module name example '$_app/config'
Vuex 3.6.2 will organize this on the first level of the store, accessable via state['$_app/config'].
Vue-Devtools 6.0.5 wrongly interprets the '/' character as hierarchy item and wants to put a 'config' module below '$_app' which does not exist.
For the previous devtools versions, this was no problem at all and the behaviour of the devtools and vuex the same.

[crunk1]

Got this error too. Devtools 6.0.2 (vue 2.6.14, dunno if that helps)

[Akryum]

@crunk1 Looks like you have an issue with vue-router. Please open another issue with more details about versions of libraries you use and a runnable reproduction.

[AjBreidenbach]

It seems like the devtools used to catch these types of errors and would display them inline with the rest of the store state. In my case it's not showing the contents of a store when a single getter fails.

This getter fails because state.Resource is undefined getResources(state) {return Object.values(state.Resource)}

The result is that I cannot view the store at all and an error is thrown whenever I click on the name of the store in the devtools

[zoyuxb]

This error only seems to start happening in last a couple of days and only effects namespace enabled modules.

[ATLANT-Z]

I did a hard reset.

F12 => RMB => Hard Reboot. This solved the error =)

[Akryum]

@AjBreidenbach The vuex inspector handles errors inside getters.

[AjBreidenbach]

Thank you for your reply @Akryum. The error handling was definitely working for me on previous versions of the devtools. If I get a chance I'll try to create a minimal reproduction. Seems like it might be tricky to reproduce.

[BoYuanSu]

I has the same error in my project.
It seems that my state key was duplicated with getters key.
FYI
@AjBreidenbach

import { defineStore } from 'pinia'
export const useUser = defineStore('user', {
  state: () => ({
    data_: [],
  }),
  getters: {
    data_: (state) => state.data_ || [],
  },
})

[Akryum]

@AjBreidenbach I've found a case when getters error would not be catched, fixed in vuejs/devtools@77f4cff

[gkatsanos]

Same issue after updating vue-dev-tools, please reopen.
This used to work before the update, same branch/commit hash

backend.js:702 An error occurred in hook getInspectorState registered by plugin org.vuejs.vue2-internal
callHandlers @ backend.js:702
await in callHandlers (async)
callHook @ backend.js:195
await in callHook (async)
getInspectorState @ backend.js:409
sendInspectorState @ backend.js:2416
(anonymous) @ backend.js:2289
await in (anonymous) (async)
emit @ backend.js:9962
_emit @ backend.js:6595
(anonymous) @ backend.js:6521
(anonymous) @ backend.js:6521
listener @ backend.js:13516
postMessage (async)
n @ proxy.js:1
backend.js:703 Error: Missing module "profile/" for path "profile/".

[Akryum]

@gkatsanos Please open a new issue with details and a reproduction. Thanks.

[gkatsanos]

we have a corporate 300 component application with about 15 namespaced Vuex modules, how do I create a reproduction link without putting all our private repo code in the public domain? What you're asking seems practically impossible.
Did you test all Vuex scenarios before releasing this? (this seems to be Vuex related, the plug-in can't find the module file)

[Akryum]

how do I create a reproduction link without putting all our private repo code in the public domain? What you're asking seems practically impossible.

To create a runnable reproduction, create a repo or zip with the exact same libraries and versions you are using, which reproduces the issue. This is entirely possible as many ones already do it. Without it it's sometimes extremely difficult or impossible to fix the issue you are experiencing.

Did you test all Vuex scenarios before releasing this? (this seems to be Vuex related, the plug-in can't find the module file)

This is unrealistic as testing every possible usages and combinations of libraries in every projects over the world is impossible or would require an army of testers (+ access to those projects). I discover new ways people use Vue and other libraries every day.
Did you try the beta version before the stable release of v6? It would have been nice to have a bug report.

we have a corporate 300 component application with about 15 namespaced Vuex modules

I tested regularly on a big 500+ components applications with many Vuex modules. It doesn't really matter?

[AjBreidenbach]

@gkatsanos This comes across as a profoundly rude question. If you have a 300 component application, I'd think you have the resources to create a minimal reproduction or downgrade your devtools until someone else does.

Please be respectful to open source contributors

[gkatsanos]

@Akryum Would it be possible for one to downgrade to the 5.x branch of the extension? We have a non-functioning devtools extension and it is kind of blocking us.
Many thanks

[zoyuxb]

For those who encountering this problem, you may try one of the below options before there is a fix.

1. Disable "custom inspector" in the Devtool global settings - NOTE: your store modules will no longer be examined
2. Remove the latest version and install the legacy version instead - https://devtools.vuejs.org/guide/installation.html#legacy

[Akryum]

Read the docs

[gkatsanos]

thanks everyone, just uninstalled 6.x and installed the legacy.

[Akryum]

@gkatsanos You obviously don't want to help but just in case for anyone else seeing the comments in this thread, please post a reproduction in #1669.