Vuex (vuex-typex) suddenly throws unknown action type

[alexeigs]

I have a hard time understanding my issue. I already experienced it in the past but cannot exactly remember how I got rid of it. Now again, I get a [vuex] unknown action type: attributes/getAttributes error out of the blue without even having touched any store related code. Potentially I re-added my npm packages/package-lock.json before it happened but that's just a guess as I don't know anything else that may have changed "fundamentally".

loadData() {
    console.log(attributesDispatch) // #1
    console.log(attributesDispatch.getAttributes()) // #2
    attributesDispatch.getAttributes() // #3
}

resulting in

#1

{ getAttributes: ƒ }

getAttributes: ƒ (payload)
// contents:
arguments: (...)
caller: (...)
length: 1
name: ""
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: index.js?fb46:86
[[Scopes]]: Scopes[5]
0: Closure (ModuleBuilderImpl.dispatch) {_this: ModuleBuilderImpl, namespacedKey: "attributes/getAttributes"}
1: Closure {ModuleBuilderImpl: ƒ}
2: Closure {__extends: ƒ, __assign: ƒ, vuex_1: Module, useRootNamespace: {…}, qualifyKey: ƒ, …}
3: Closure (./node_modules/vuex-typex/dist/index.js) {__webpack_require__: ƒ, exports: {…}, module: {…}, arguments: Arguments(3)}
4: Global {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

#2

[vuex] unknown action type: attributes/getAttributes

undefined

#3

[vuex] unknown action type: attributes/getAttributes

It worked before and everything still works for my other store modules that are set up in the same way.

Anyone experiencing similar issues?

[jarlah]

Very strange. I have just started using this library. Maybe we dont need this library for vue 3. But anyway. How is the getAttributes method defined in the exported attributesDispatch object? There is option in typescript to make a get method aka get attributes() { return getAttributesReader(); } but i guess you have defined it like getAttributes() { return getAttributesReader(); }... If its sync method. If its async method dont listen to me :)

[mrcrowl]

I can't tell without a more complete example, but this is suggesting that the attributes/getAttributes action isn't registered with the store/module. This could be due to import ordering or circular references.

[alexeigs]

@mrcrowl By putting console.logs in the library within ModuleBuilderImpl (for the modules) and getStoreBuilder (for the main store) I figured out that this store/module - one out of 10 - apparently gets build only right after the vuex-store does and that's why it's not included there:

index.js?fb46:37 module A
index.js?fb46:37 module B
index.js?fb46:37 module C
index.js?fb46:218 MAIN VUEX STORE INITIATED
index.js?fb46:37 module attributes

Any idea why this can happen? What code would you need to see in order to debug that part?

[mrcrowl]

For the attributes module, where/when are you importing it? Is it a sub-module of another module perhaps? It appears it is being imported after the call to .vuexStore()

My suspicion would be that something is inadvertently importing the file that calls .vuexStore() (let's call this file "App" just for simplicity, however, obviously I don't know what it is called in your case)... anyway, something is possibly importing "App" before you're expecting it to do so. Try tracing back from references to "App" to see what imports it, and then what imports those files. I find it helpful sometimes to draw a picture of your import chain as a dependency-graph on paper if that helps.

[alexeigs]

@mrcrowl Definitely, I'm investigating... so far I assume it may be due to how I launch the app in main.ts where I access a module of the store authDispatch before importing the store itself (to check the auth status of the current firebase user before launching). If that's the case, how could I achieve the same but make sure the store is initiated correctly?

authDispatch.observeAuthTokenStatus().then(() => launchApp())

function launchApp() {
  if (!app) {
    app = new Vue({
      i18n,
      router,
      store,
      render: h => h(App),
    }).$mount('#app')
  }
}

EDIT: It doesn't seem to be related to this, the initiating process starts and finished before.