Adding @Module options throws "TS1238: Unable to resolve signature of class decorator..." error

[wonder95]

I am attempting to use vuex-module-decorators with Typescript in a Vuex module, but I am unable to add the namespaced and name options to the @Module decorator. I can add @Module by itself, but as soon as I try to add the options, I get this error message:

TS1238: Unable to resolve signature of class decorator when called as an expression. Cannot invoke an expression whose type lacks a call signature. Type 'void' has no compatible call signatures.

Here is the module:

import * as types from '@/store/types';
import {Formio} from 'formiojs';
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'

interface RoleItem {
  _id: string;
  title: String;
  admin: Boolean;
  default: Boolean;
}

interface RoleList {
  [key: string]: RoleItem;
}

@Module({  name: 'auth', namespaced: true })
export class Auth extends VuexModule {
  public user: {}
  public loggedIn: boolean
  public roles: {}
  public forms: {}
  public userRoles: {}

  @Action
  setUser({ state, commit, dispatch }, user) {
    commit(types.SET_USER, user);
    dispatch('setLoggedIn', true);
    dispatch('setUserRoles', state.roles);
  }
  @Action
  setLoggedIn({commit}, loggedIn) {
    commit(types.SET_LOGGED_IN, loggedIn);
  }
  @Action
  getAccess({ commit, dispatch, getters }) {
    const projectUrl = Formio.getProjectUrl();
    Formio.request(projectUrl + '/access')
      .then(function(accessItems) {
        commit(types.SET_ROLES, accessItems.roles);
        commit(types.SET_FORMS, accessItems.forms);
        if (getters.getLoggedIn) {
          dispatch('setUserRoles', accessItems.roles);
        }
    });
  }
  @Action
  setUserRoles({ commit, getters }, roles: RoleList) {
    const roleEntries = Object.entries(roles);
    const userRoles = getters.getUser.roles;
    const newRolesObj = {};
    roleEntries.forEach((role) => {
      const roleData = role[1];
      const key = 'is' + role[1].title.replace(/\s/g, '');
      newRolesObj[key] = !!userRoles.some(ur => roleData._id === ur);
    });
    commit(types.SET_USER_ROLES, newRolesObj);
  }

  @Mutation
  public [types.SET_USER](user) {
    this.user = user;
  }
  @Mutation
  public [types.SET_LOGGED_IN](loggedIn: boolean) {
    this.loggedIn = loggedIn;
  }
  @Mutation
  public [types.SET_ROLES](roles: RoleList) {
    this.roles = roles;
  }
  @Mutation
  public [types.SET_FORMS](forms) {
    this.forms = forms;
  }
  @Mutation
  public [types.SET_USER_ROLES](userRoles) {
    this.userRoles = userRoles;
  }
}

export default Auth;

One suggestion made to me was that I should use named exports instead of default exports, but no matter how I change the export, I still get the same error. What am I doing incorrectly?

[timsayshey]

Same here ... 🤦🏻‍♂️

[timsayshey]

@wonder95 I was able to fix the issue for myself by upgrading from Node 11 to Node 12 and running npm ci. No longer getting the validation error. Hope it works for you.

[wonder95]

Hmmmm, I'm on node version 14.4.0. I'll try npm ci to see if that helps.

[timsayshey]

@wonder95 - Turns out the issue is still persisting - That actually didn't fix it - About to pull out my hair @championswimmer - Any ideas on what we should try to fix this?

[timsayshey]

@wonder95 Figured it out! For some reason, my project was missing the vuex library. Doing an npm install vuex fixed the issue for me!

[wonder95]

Dang, that was it. you da MAN!! Thanks for letting me know.

[alvarosabu]

Im having exactly the same issue, but I did add the vuex library... still failling.

[rafatrace]

Me too @alvarosaburido, did you find any solution?

My code:

import { VuexModule, Module, getModule } from 'vuex-module-decorators'
import store from '@/store'
import { Users, Profile } from '../models'

@Module({
  namespaced: true,
  name: 'users',
  store
})
class UsersModule extends VuexModule {
  users: Users | null = null
  profile: Profile | null = null
}

export default getModule(UsersModule)

[J4si3k]

I was able to fix it by upgrading node 10 to node 12

[patrickelectric]

same problem here, using esnext