Uncaught TypeError: Cannot read property 'getters' of undefined #264
Comments
|
I looked into it and the vuex store is injected into a child component certainly. It looks like you define the computed: {
...mapGetters({
notifications: 'all'
})
}Because all getters functions you defined on the store are gathered and flattened to |
|
@ktsn Thank you. The problem is not from my code, the sample above is a working code from a Vue 1.0 App. 'notifaction.all' is how I write my getters in a module, prefixing my methods with the module name. The issue is trying to call $store on a child component which throws that error: res[key] = function mappedGetter() {
if (!(val in this.$store.getters)) {
console.error("[vuex] unknown getter: " + val);
}
return this.$store.getters[val];
};The same applies to mapState, mapActions etc. I tested your sample and even used Vue 2 and it works just fine. Maybe the problem is from my build tool (vue-loader). Just cannot get my head around it. |
|
Hmm, I am still not sure why it is happened... |
|
Okay, thank you. I have created a gist for it, you can find it here https://gist.github.com/brainyl/e43dbe74916fc071dc99c1eff3f90274 |
|
Thank you! I find the problem on my environment too. |
|
Okay @ktsn. Thank you! |
|
@brainyl
The problem is caused by duplicated loading of vue.js. |
|
Thank you @ktsn. It is now working as expected. The Vue ecosystem is simply awesome! |
|
@ktsn @yyx990803 Do you guys think this can be avoided somehow, or is this something we should warn users about when explaining the differences about the different builds? If the latter, it should probably be explained in the vue-loader doc as well as the webpack-specific template docs, right? |
|
@LinusBorg @yyx990803 import Vue from 'vue' // runtime-only build
import compiler from 'vue-runtime-compiler' // load template compiler
Vue.use(compiler) // enable compilerIn any way, I think it should be explained on vue-loader (and vueify) doc because it is hard to solve if users face this problem. |
|
Agreed. |
|
@ktsn @LinusBorg indeed, this probably should be noted on the installation page as well - basically, if using a module bundler, never do |
|
I am also experiencing this issue but am not using the build version of vue. In my code, I do EDIT: Worth noting, my mapGetters is like so: It works fine when I call |
|
I also encountered this error and it was because I forgot to put |
|
@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 :P |
|
@connor11528 I was also missing the Store in my bootup. Think it went missing when I was refactoring, whoops. |
|
I was thrown off by the fact that all my getters worked individually, but when I tried to use mapGetters, this is the error it failed with. I didn't have store in my I think there should be a note in the docs somewhere indicating either that store should always be in |
|
Just if anybody ever encounters this issue while using Vuex in Jest: solved a similar issue for me. |
|
It looks like this is related to the template compiler of either vue-jest or vue test utils. When adding this mapper as described in my comment above this issue is solved, but child components are not mounted correctly anymore. |
|
@Prior99 It happened to me, the similar issue. The map module issue was gone by changing the |
|
@irina9215 Are you using |
|
@connor11528 THANK YOU! I forgot too |
|
I also ran into this when running in a non-compiled environment. I setup this code sandbox to prove it worked. https://codesandbox.io/s/8knp1jm918 My Errors was that i was importing use |
|
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. :(
|
|
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 |
|
"TypeError: Cannot read property 'getters' of undefined" |
This error is thrown when you use any of the vuex helpers in a child component. From debugging, I noticed the store is not being injected into child components. For example, when I have this code in a child component, the error is thrown
I suspect there is breaking change with the current version of vuex and vue.
The text was updated successfully, but these errors were encountered: