What are these strange getter objects with "effect" and "value"?

[plweil]

I'm getting a strange display of pinia getters in VueDevTools. Can someone please explain what is going on here? I've never seen this before. The getters are being displayed with "effect" and "value" properties instead of arrays of objects (see third example below). Bear in mind that this is with Vue 2.7 and the latest pinia, using the Options API:

If you click "effect" of one of these, you get this:

I'm wondering whether this is some weird interaction of pinia and the built-in vue-composition-api in Vue 2.7. Here are the same getters, displayed in Vue DevTools, using Vue 2.6.11, vue-composition-api plugin 1.6.2, and the latest pinia:

[jaythomas]

@plweil did you ever resolve this?

[plweil]

@jaythomas This was a while ago, but I think upgrading to Vue 3 got rid of it. Hard to remember now. There's no reason not to move to Vue 3 now.

[jaythomas]

@plweil if only all massive production apps could be moved to Vue 3 so easily. 🙂

For anyone else that stumbles on this, when I load the app via vue-cli/webpack I don't see the issue, only in vite. So it seems to be a bug in the asset pipeline's depedency chain. If I narrow it down to a specific culprit I'll update my comment with something more helpful.

[jaythomas]

I was able to get it working with vite by first wiping my node_modules directory and then ensuring pinia and vue-demi were on the latest version.

I don't know how vue-demi was out-of-date since the package-lock version read 0.14.6 (the latest at the time of writing this) but wiping away node_modules and reinstalling matched them up. Here is the relevant dependencies from package.json as they are working:

"dependencies": {
    "pinia": "^2.1.7",
    "vue": "^2.7.16",
    "vue-router": "^3.6.5"
},
"devDependencies": {
    "@vitejs/plugin-vue2": "^2.3.1",
    "vite": "^4.2.1"
}