Vue-devtools: Application fine but Dev Tools throwing uncaught TypeError (wrappedGetters)

[tomeightyeight]

The Vue JS application appears to be fine (fully functional and nothing in console) but when accessing the Vue tab in Chrome dev tools it throws the following error.

Please note the attached screenshot of the developer console:

Any assistance would be much appreciated. This appeared to be fine yesterday. I see there was an update just recently released (3.1.2 - March 15th 2017) according to the Chrome Web Store.

Note that I'm using a modularised vuex store (and i'm using store.registerModule).

Thanks,

Tom

[tomeightyeight]

I've just loaded in the extension manually via the instructions included within this repository. I've reverted back to the 3.0.0 release (d8b9a84).

All appears to now be working again.

Let me know if you require anymore information regarding this open issue and i'll do my best to provide.

[mariavilaro]

I have a different problem but I think it's related. Chrome last version, in Windows, devtools updated from just today, I got a js error in the console

backend.js:1 Uncaught TypeError: Cannot read property 'config' of undefined
at backend.js:1

And the vue tab is empty.

[posva]

@mariavilaro That has already been fixed and will be released very soon
@tomeightyeight can you boil down the error and provide a repro using this template?
Thanks!

[pierissimo]

same error here, since the update of this morning.

[CoolGoose]

+1 error here

Vue version: 2.2.2
Vuex version: 2.2.1
Chrome 56 or 57
Vue.js devtools 3.1.2

App works without the debugger on.

[ibarral]

same problem here. How do I revert to previous version?

Thanks!

[tomeightyeight]

@ibarral

See documentation for this repo

[mikield]

Same error, but another error alert.

[marcelombc]

Same error. Reverting version.

[avicha]

the old version came to this error as well when the code updated and webpack hot reload, and new version throws this error whenever the page loaded with vuex store config. look forward for updating the chrome plugin as quick as possible.thanks.

[sudo-suhas]

More info:

#Stack trace
vuex.esm.js?edaa:628 Uncaught TypeError: rawGetter is not a function
    at wrappedGetter (eval at <anonymous> (http://localhost:8080/app.js:968:1), <anonymous>:634:12)
    at Vue$2.computed.(anonymous function) (eval at <anonymous> (http://localhost:8080/app.js:968:1), <anonymous>:437:42)
    at Watcher.get (eval at <anonymous> (http://localhost:8080/app.js:790:1), <anonymous>:2445:25)
    at Watcher.evaluate (eval at <anonymous> (http://localhost:8080/app.js:790:1), <anonymous>:2545:21)
    at Vue$2.computedGetter [as default] (eval at <anonymous> (http://localhost:8080/app.js:790:1), <anonymous>:2771:17)
    at Object.get [as default] (eval at <anonymous> (http://localhost:8080/app.js:968:1), <anonymous>:439:42)
    at n (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:13880)
    at n (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:13910)
    at Object.t.stringifyStrict (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:14757)
    at Object.t.stringify (chrome-extension://nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js:1:14544)
wrappedGetter @ vuex.esm.js?edaa:628
computed.(anonymous function) @ vuex.esm.js?edaa:431
get @ vue.runtime.esm.js?a427:2444
evaluate @ vue.runtime.esm.js?a427:2544
computedGetter @ vue.runtime.esm.js?a427:2770
get @ vuex.esm.js?edaa:433
n @ backend.js:1
n @ backend.js:1
t.stringifyStrict @ backend.js:1
t.stringify @ backend.js:1
s @ backend.js:1
s @ backend.js:1
r @ backend.js:1
o @ backend.js:1
i @ backend.js:1
r @ backend.js:1

Relevant code section - https://github.com/vuejs/vuex/blob/dev/dist/vuex.esm.js#L622-L635

function registerGetter (store, type, rawGetter, local) {
  if (store._wrappedGetters[type]) {
    console.error(("[vuex] duplicate getter key: " + type));
    return
  }
  store._wrappedGetters[type] = function wrappedGetter (store) {
    return rawGetter(
      local.state, // local state
      local.getters, // local getters
      store.state, // root state
      store.getters // root getters
    )
  };
}

Sometimes the rawGetter is an object for some reason. Not sure when this is happening though.

Was not able to reproduce the issue in a fresh project with minimal vuex setup.

My setup:

|Module|Version|
|--------|---------|
|Node.js|6.10.0|
|npm|3.10.10|
|vue|2.2.4|
|vuex|2.2.1|
|vue-devtools|3.1.2|
|webpack|2.2.1|
|babel|6.4.1|

[tomeightyeight]

@sudo-suhas were you using a modularised vuex store?

[CoolGoose]

@tomeightyeight I am using a modularised vuex store as in the vuex shopping cart example from here https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart/store

[sudo-suhas]

@tomeightyeight Yes, I am using a modularised vuex store with hot module replacement.

[skyrpex]

@tomeightyeight Yes, I am using a modularised vuex store with hot module replacement.

Me too.

[mikield]

In my case I was just adding empty geeters to Vuex store, but modular getter are working fine.
So I think the problem is in global getters, just try to play around with them. (remove step by step and see where the error shows up)

[posva]

@tomeightyeight Can you please boil down the code to a minimal repro? It would really help

[h6ah4i]

Hi. I had the same rawGetter is not a function message issue, but I noticed that was my fault. I was importing vuex's actions and getters files in wrong way. I suppose no everyone make the same idiot mistake, but this information may help some people suffering the issue 😉

TL;DR

import * as actions from './actions';
import * as getters from './getters';

👇👇👇

import actions from './actions';
import getters from './getters';

---

store/index.js

...
import * as actions from './actions';  // <- This is a culprit! "* as" is not required!
import * as getters from './getters';  // <- This is a culprit! "* as" is not required!
import modules from './modules';
...

export default {
   modules,
   getters,
   actions,
   ...
};

store/actions.js, store/getters.js

// just returning an empty object, because I am using vuex modules
// so no root actions/getters are defined here.
export default {
};

[CoolGoose]

@h6ah4i if that is the case (i will check Monday at work). I have the same "stupid" import * as actions code.
The culprit is then https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/store/index.js since I used this as a reference and blindly copy pasted.

Can we all confirm that changing that fixes it ? If no one else will have a problem anymore, than I'll do a pull request on the example and replace it to not use *

[mikield]

I think that the problem is in empty global actions/getters when using modules.

[sudo-suhas]

@h6ah4i Thank You!! That helped. I was making an even bigger mistake.. getters.js was an empty file! Webpack would have ignored that but hot reload probably does something else..

[CoolGoose]

@mikield so more like, don't do imports on empty files.

[mikield]

If no one else will have a problem anymore, than I'll do a pull request on the example and replace it to not use *

In that case we need to use *
In that file, you added, is something like
import EVERITING from FILE
cause the file can have 10 export functions. And you dont want to import them by one. And you shall be using * (everithing)

So no need to make pull request, the code in examples is very good, just only in that case.

Instead try not to import empty actions/getters. :)

[posva]

Closing this since the culprit seems to have been found 🙂
If the error persists, please open a new issue with a repro

If you export getters like this:

export function myGetter (state) { ... }
export function otherGetter (state) { ... }

Then you should import them with import * as getters from './getters' so you get an object with all the functions that you can directly pass to the Store.

[ibarral]

@posva I have the same problem that @mariavilaro, I get an:

Uncaught TypeError: Cannot read property 'varName' of undefined

That problem is already fixed?

Thanks!

[juxe]

I was having the same issue as OP and resolved it by replacing this line in my global getters:
export const production = process.env.NODE_ENV === 'production'

with this line:
export const production = () => process.env.NODE_ENV === 'production'

so it seems my getter was not a function but just a boolean value, and this was causing the wrappedGetter to fail to find a function there. It was hard to track down the error though, I couldn't find it though console logs.