'"vuex-module-decorators" throws "ERR_STORE_NOT_PROVIDED" error in NuxtJS app while "getModule" helper has not been used

My index.ts in NuxtJS application:

import Vue from "vue";
import Vuex, { Store, Dispatch } from "vuex";

import ExampleModule from "path/to/ExampleModule.vuex";

Vue.use(Vuex);


type RootState = [key: string]: unknown;

export const store: Store<RootState> = new Vuex.Store<RootState>({
  actions: {
    async nuxtServerInit(blackbox: { dispatch: Dispatch; }): Promise<void> {
      await blackbox.dispatch("exampleModule/doSomething");
    }
  },
  modules: {
    exampleModule: ExampleModule
  }
});

const createStore: () => Store<RootState> = (): Store<RootState> => store;


export default createStore;

I got the error:

ERR_STORE_NOT_PROVIDED: To use getModule(), either the module should be decorated 
with store in decorator, i.e. @Module({store: store}) or store should be passed 
when calling getModule(), i.e. getModule(MyModule, this.$store)

The cause seems to be clear - the usage of getModule(), but inside ExampleModule, I have not used getModule yet:

import {
  VuexModule,
  Module as VuexModuleConfiguration,
  // I have not imported 'getModule()' here yet
} from "nuxt-property-decorator";

@VuexModuleConfiguration({
  name: "exampleModule",
  namespaced: true
})
export default class ExampleModule extends VuexModule {
  // ... there is not getModule() here yet
}

So maybe it has been used somewhere else? Anyway but if to comment out

export const store: Store<RootState> = new Vuex.Store<RootState>({
  actions: {
    async nuxtServerInit(blackbox: { dispatch: Dispatch; }): Promise<void> {
      // ...
    }
  },
  modules: {
    // exampleModule: ExampleModule
  }
});

off course it will client.js?1d97:57 [vuex] unknown action type: exampleModule/doSomething error, but above one (ERR_STORE_NOT_PROVIDED) will disappear.

I lost the link but in one GitHub issue, as the solution for the similar problem, the usage of the dymamic modules has been suggested. First of all initially I used dynamic modules only:

import Vue from "vue";
import Vuex, { Store, Dispatch } from "vuex";


Vue.use(Vuex);


type RootState = [key: string]: unknown;

export const store: Store<RootState> = new Vuex.Store<RootState>({
  actions: {
    async nuxtServerInit(blackbox: { dispatch: Dispatch; }): Promise<void> {
      await blackbox.dispatch("exampleModule/doSomething");
    }
  }
});

const createStore: () => Store<RootState> = (): Store<RootState> => store;


export default createStore;

In this case, client.js?1d97:57 [vuex] unknown action type: exampleModule/doSomething will be too. But does exampleModule has actually been physically bundled by Webpack> It has not been imported (by import keyword). ExampleModule imports the store, but the effect as ExampleModule has been recognized as unused module.

import { store } from "~/Store";


@VuexModuleConfiguration({
  name: "exampleModule",
  store,
  namespaced: true,
  stateFactory: true,
  dynamic: true
})
export default class ExampleModule extends VuexModule {
  // ...
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source