'"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 |
|---|
