vuex: Uncaught TypeError: Cannot read property 'getters' of undefined

I also encountered this error and it was because I forgot to put store in my main Vue bootup (main.js) file like so:

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store
})

@brainyl I realize the solution of this issue. Please try the following steps.

1. Add alias of vue in webpack.config

   module.exports = {
     // ...
     resolve: {
       alias: {
         vue: 'vue/dist/vue.js'
       }
     },
     // ..
   }
   

2. Rewrite all import Vue from 'vue/dist/vue.js' to import Vue from 'vue'

3. Then it should work

The problem is caused by duplicated loading of vue.js. Your code only loads the standalone build of vue.js (import Vue from vue/dist/vue.js) but vue-loader will load the runtime only build for hot reloading internally (require('vue') i.e. vue/dist/vue.common.js). So, you can solve this problem by adding alias to standalone build.

This happened to me because of a circular import.

myfile.ts imported a store instance, but somewhere deep one of the store’s submodules imported myfile.ts

Commenting out the line where myfile.ts imports the store fixed the issue

@connor11528 THANK YOU!! After about 1hr of trying to figure out why mapGetters was not working, I came across your comment and checked my main.vue – hand slap my own head 😛

Just if anybody ever encounters this issue while using Vuex in Jest:

  "moduleNameMapper": {
    "vue$": "<rootDir>/node_modules/vue/dist/vue.js"
  },

solved a similar issue for me.

@ktsn @LinusBorg indeed, this probably should be noted on the installation page as well - basically, if using a module bundler, never do import Vue from 'vue/dist/vue', but rather use the alias option in the bundler. /cc @chrisvfritz

I am also experiencing this issue but am not using the build version of vue. In my code, I do import Vue from 'vue' and have the mapGetter in a globally included mixin. Is that supported?

EDIT: Worth noting, my mapGetters is like so:

computed: {
    ...mapGetters({
      user: 'getUser'
    })
  }

It works fine when I call this.user from within a method (so any function between the methods: {} but not when calling within the mixin’s created or mounted event.

“TypeError: Cannot read property ‘getters’ of undefined”

Have this issue as well. Trying to run a trivial test with jest and getting a horrible looking stack trace. 😦

TypeError: Cannot read property 'getters' of undefined at VueComponent.mappedGetter (node_modules/vuex/dist/vuex.common.js:887:73) at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4442:25) at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.dev.js:4547:21) at Proxy.computedGetter (node_modules/vue/dist/vue.runtime.common.dev.js:4796:17) at Proxy.render (src/components/TodoList.vue:42:537) at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3532:22) at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4036:21) at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4442:25) at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4431:12) at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4043:3) at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8368:10) at init (node_modules/vue/dist/vue.runtime.common.dev.js:3112:13) at createComponent (node_modules/vue/dist/vue.runtime.common.dev.js:5935:9) at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5882:9) at createChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6010:9) at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5911:9) at createChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6010:9) at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5911:9) at createChildren (node_modules/vue/dist/vue.runtime.common.dev.js:6010:9) at createElm (node_modules/vue/dist/vue.runtime.common.dev.js:5911:9) at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6432:7) at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3915:19) at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4036:10) at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4442:25) at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4431:12) at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4043:3) at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8368:10) at Object.<anonymous> (test/unit/specs/TodoMVC.spec.js:8:32) at Object.asyncFn (node_modules/jest-jasmine2/build/jasmine_async.js:82:37) at resolve (node_modules/jest-jasmine2/build/queue_runner.js:52:12) at new Promise (<anonymous>) at mapper (node_modules/jest-jasmine2/build/queue_runner.js:39:19) at promise.then (node_modules/jest-jasmine2/build/queue_runner.js:73:82) at process._tickCallback (internal/process/next_tick.js:68:7)

Thank you @ktsn. It is now working as expected. The Vue ecosystem is simply awesome!