New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reactivity loss when using with @vue/compat #253
Labels
help wanted
Extra attention is needed
Comments
I figured out that to make vite apply the // vitest.config.js
export default mergeConfig(
viteConfig,
defineConfig({
test: {
environment: 'jsdom',
root: fileURLToPath(new URL('./', import.meta.url)),
+ server: {
+ deps: {
+ inline: ['vue-demi'],
+ },
+ },
},
}),
); However once I did that I got a different error:
When I stop there in debugger I can see that the vue-demi import is not quite like it should: I'd expect |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reproduction
https://github.com/bgoscinski/repro-vue-compat-reactivity
Steps to reproduce the bug
npm install
npm test
. Test fails'vue': '@vue/compat'
alias from./vite.config.js
npm test
again. Test passes 🤯Expected behavior
Reactivity is preserved when using
vue-demi
with@vue/compat
Actual behavior
No/broken reactivity
Additional information
I think that vue-demi 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 coming from vuejs/pinia#2565 but it's still not clear for me how to properly configure aliases and I think it would be beneficial for the whole ecosystem to have this documented somewhere.
The text was updated successfully, but these errors were encountered: