Reactivity loss when using pinia with @vue/compat

[bgoscinski]

Reproduction

https://github.com/bgoscinski/repro-vue-compat-reactivity/tree/4c0097057ad00d1316dd354700c4d13c3d209592

Steps to reproduce the bug

1. Run npm install
2. Run npm test. Both tests fail
3. Kill vitest
4. Remove 'vue': '@vue/compat' alias from ./vite.config.js
5. Run npm test again. Both tests pass 🤯

Expected behavior

Reactivity is preserved when using pinia with @vue/compat

Actual behavior

No/broken reactivity

Additional information

I think that pinia doesn't use the reactivity primitives from @vue/compat so we end up with both of these loaded at the same time:

• node_modules/@vue/compat/dist/vue.cjs.js
• node_modules/@vue/reactivity/dist/reactivity.cjs.js

Because of that the component's render effect is not tracking all reactive values properly.

I'm not sure where exactly the root cause of the problem is - is it in pinia, vue-demi, vitest, vite or @vue/compat so please advise if this is the wrong repo for this issue :)

[posva]

this isn’t directly related to pinia, some extra configuration in the bundles is likely needed so vue-demi also resolves. I think you should be able to fix this by also aliasing to whatever vue-demi imports from

[bgoscinski]

You're right. I managed to reproduce this without pinia. I'll open issue in vue-demi repo because it's not clear to me how to configure it and I think it would be nice to have this in official docs somewhere. Thanks!

[posva]

If you think this should be documented, since you probably already went through some of the documentation to use @vue/compat, I think it's better to open a small PR with a proposal to where you think this should be (vue docs likely?). After all, you went through the struggle already so you should know better than others how to prevent it

[bgoscinski]

I'm still trying to figure out the fix but I'm not very well versed in vite configuration. Once I have something working I'll make sure to open PR to vue docs.