Vite + VueCompositionApi error (again)

[jacekkarczmarczyk]

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

[jacekkarczmarczyk]

Additional info gathered on vite discord by @LinusBorg

Link to the related vite issue: https://github.com/vitejs/vite/issues/5688

[victorgarciaesgi]

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 :)

[jacekkarczmarczyk]

Sure, I'll also check on my actual repo when you release the alpha, thanks!

[victorgarciaesgi]

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

[jacekkarczmarczyk]

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

[victorgarciaesgi]

Humm I just tested with a fresh vue-cli :( i'll try on sandbox

[victorgarciaesgi]

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

[jacekkarczmarczyk]

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!

[victorgarciaesgi]

@jacekkarczmarczyk Version 3.1.0 with full support for Vite.js just released :D

[jacekkarczmarczyk]

Thanks!