Throws "Cannot read property 'getters' of undefined" using vuex's dynamic modules

[ealves-pt]

Issue

When I activate the sync I get the following error:

vuex.js?90cb:123 Uncaught TypeError: Cannot read property 'getters' of undefined
    at Vue$3.mappedGetter (eval at <anonymous> (app.js:825), <anonymous>:123:31)
    at Watcher.get (eval at <anonymous> (app.js:658), <anonymous>:2936:27)
    at Watcher.evaluate (eval at <anonymous> (app.js:658), <anonymous>:3044:21)
    at Proxy.computedGetter (eval at <anonymous> (app.js:658), <anonymous>:3240:15)
    at n (backend.js:1)
    at n (backend.js:1)
    at n (backend.js:1)
    at n (backend.js:1)
    at n (backend.js:1)
    at n (backend.js:1)

Use Case

I have an app composed by two distinct areas, for simplicity lets say that we have the following routes:

mode: 'history',
[
 {
   name: 'area1',
   path: '/area1',
   component: resolve => require(['./views/area1'], resolve)
 },
 {
   name: 'area2',
   path: '/area2',
   component: resolve => require(['./views/area2'], resolve)
 },
]

I have a global store being registered that looks like this:

export default {
  state: {
    user_id: ''
  },
  getters: {
    USER_ID_GET: ({ user_id }) => user_id
  },
  actions: {
    USER_ID_SET: ({ commit }, payload) => {
      commit('USER_ID_SET', payload)
    }
  },
  mutations: {
    USER_ID_SET: (state, payload) => {
      state.user_id = payload
    }
  }
}

And then I have two dynamic stores each one being registered/unregistered when either area1 or area2 components are created/destroyed. This is an example for area1:

// store1.js
export default {
  state: {
    ids: []
  },
  getters: {
    IDS_GET: ({ ids }) => ids
  },
  actions: {
    IDS_ADD: ({ commit }, payload) => {
      commit('IDS_ADD', payload)
    },
    IDS_RESET: ({ commit }) => {
      commit('IDS_RESET')
    }
  },
  mutations: {
    IDS_ADD: (state, payload) => {
      state.ids.push(payload)
    },
    IDS_RESET: (state) => {
      state.ids = []
    }
  }
}

// area1.vue
<template>
  <div>
    <router-link :to="{ name: 'area2' }">Go To Area 2</router-link>
  </div>
</template>
<script>
  import store from './store1'
  export default {
    beforeCreate () {
      this.$store.registerModule('area1Module', store)
    },
    beforeDestroy () {
      this.$store.unregisterModule('area1Module')
    }
  }
</script>

So if I click the link defined in the template I get always the error mentioned at the beginning of the post but if I comment sync(store, router) everything works fine.

[LinusBorg]

thank you for your filing this issue.

Please follow the guidelines on how to report an issue. In particular, provide an example on www.jsfiddle.net (or a similar service) that reproduces the problem. If necessary, create a repository for us to clone with a minimal reproduction. repositories of actual projects will generally not be accepted. (Why is this necessary?)

Thank you.

[kazupon]

maybe, I seem this issue is vue-devtools.
vuejs/devtools-v6#271

[posva]

If it ever was a thing, it should be fixed by now, if it's still isn't, open a new issue with a repro 🙂

[vedmant]

I have the same issue with new vue devtools Vue.js devtools 5.0.3