Vite + VueCompositionApi error (again)
jacekkarczmarczyk opened this issue · comments
Describe the bug
[Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."
found in
---> <BarChart>
<Anonymous>
Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
at assert (vue-composition-api.common.js:42:15)
at getVueConstructor (vue-composition-api.common.js:324:9)
at isComponentInstance (vue-composition-api.common.js:457:15)
at setupAccessControl (vue-composition-api.common.js:735:9)
at reactive (vue-composition-api.common.js:943:5)
at ref (vue-composition-api.common.js:616:17)
at setup (components.ts:68:25)
To Reproduce
https://github.com/jacekkarczmarczyk/vite-vue-chart-3-bug
run yarn && yarn dev
, see the console
Nothing fancy in the code:
import Vue from 'vue'
import { createApp, h } from 'vue-demi'
import VueCompositionApi from '@vue/composition-api'
import App from './App.vue'
Vue.use(VueCompositionApi)
Vue.config.productionTip = false
Vue.config.devtools = true
const app = createApp({
render: () => h(App),
})
app.mount('#app')
<template>
<BarChart :chart-data="{}" />
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { BarChart } from 'vue-chart-3'
export default defineComponent({
components: { BarChart },
})
</script>
Versions
vue-chart-3@2.0.6
vue@2.6.14
@vue/composition-api@1.4.4
vite@2.7.13
Code works fine with vue cli
Additional info gathered on vite discord by @LinusBorg
Link to the related vite issue: vitejs/vite#5688
Hi! Yeah i'm aware of this problem with Vite and I was already working on an esm build in the next
branch. I will publish a alpha release if you want to try it? I will test it on your repo :)
Sure, I'll also check on my actual repo when you release the alpha, thanks!
You can try 2.1.0-alpha-5
. I tested in your repo and it works. I need to test if it still works with vue-cli and webpack
I'm currently transitioning from vue cli to vite so I have both versions available and checked both of them. In vite version it looks fine, but with vue cli now I'm having the error from the issue description
Humm I just tested with a fresh vue-cli :( i'll try on sandbox
Ok it's a recurring problem. What is your version of @vue/composition-api
? Updating it to 1.4.5
fixed the bug for me on https://codesandbox.io/s/vue-chart-3-vue-2-composition-api-forked-zken4?file=/src/main.js
Yeah upgrading composition to 1.4.5 worked on vue cli. I'll be doing more tests of my app after transitioning to vite, but for now charts issue was the last one I was aware of. Thanks!
@jacekkarczmarczyk Version 3.1.0 with full support for Vite.js just released :D
Thanks!