victorgarciaesgi / vue-chart-3

📊 A simple wrapper around Chart.js 3 for Vue 2 & 3
https://vue-chart-3.netlify.app/
MIT License
310 stars 112 forks source link

Vite + VueCompositionApi error (again) #92

Closed jacekkarczmarczyk closed 2 years ago

jacekkarczmarczyk commented 2 years ago

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)

image

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 commented 2 years ago

Additional info gathered on vite discord by @LinusBorg

image

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

victorgarciaesgi commented 2 years ago

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 commented 2 years ago

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

victorgarciaesgi commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

victorgarciaesgi commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

jacekkarczmarczyk commented 2 years ago

Thanks!