Closed bgoscinski closed 7 months ago
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
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!
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
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.
Reproduction
https://github.com/bgoscinski/repro-vue-compat-reactivity/tree/4c0097057ad00d1316dd354700c4d13c3d209592
Steps to reproduce the bug
npm install
npm test
. Both tests fail'vue': '@vue/compat'
alias from./vite.config.js
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:
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 :)