[Vue warn]: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once. thrown when using Vue2, composition api, and Pinia

[brianjamesmatthews]

Reproduction

I am trying to add Pinia to a Vue2 project with the composition API. I following the docs and installed pinia and vue @vue/composition-api using npm install pinia @vue/composition-api. In main.ts I have:

import VueCompositionApi from "@vue/composition-api";
import { createPinia, PiniaVuePlugin } from "pinia";

Vue.use(VueCompositionApi);
Vue.use(PiniaVuePlugin);
const pinia = createPinia();

...

new Vue({
    ...,
    pinia,
    render: (h): VNode => h(App)
}).$mount("#app");

I created a simple test component for testing the composition API. This works perfectly fine before I add Pinia. Once I add Pinia, I start getting the following errors:

[Vue warn]: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.
[Vue warn]: Error in data(): "Error: [vue-composition-api] No vue dependency found."

Additional information

Versions:
"@vue/composition-api": "^1.2.4"
"vue": "^2.6.14"
"pinia": "^2.0.0-rc.12"

[posva]

I need a boiled down repro to check. Pinia didn't add the composition api, so that's weird

[brianjamesmatthews]

I tried adding this to an existing internal project but I can try spinning up a test project to see if I can reproduce it when I have time. I checked the source code here and didn't see any Vue.use(VueCompositionApi) so I also thought it was weird. If I comment out Pinia though it works perfectly fine. I was wondering if maybe vue-demi was causing some issue since that uses the composition-api but I'm not sure.

[brianjamesmatthews]

@posva
I created a simple repo that reproduces the issue: https://github.com/brianjamesmatthews/hello-world

[posva]

You have 2 Vue.use(VueCompositionApi) in your code. It should be there only once.
If I were you, I would remove the stores/index.ts file and move the creation of pinia to main.ts like in docs.

[brianjamesmatthews]

@posva
I removed stores/index.ts and moved the creation of pinia to main.ts. The issue still persists. I only see one Vue.use(VueCompositionApi) in my code on line 7 of main.ts. Where is the other?

Thank you so much. This library looks really awesome and I would really like to adopt it in all of our projects.

[posva]

Have you restarted your server? That was the other place

[brianjamesmatthews]

Yeah I restarted the server after removing store/index.ts. I'm pretty sure index.ts didn't have a 2nd registration for the composition api though:

[posva]

that's so weird... Pinia doesn't call Vue.use(CompositionAPI). It seems that vue-demi is calling it automatically, also creating other kinds of issues.

I imagine there is some kind of config that can be passed to webpack but I really don't know. Maybe asking for help in the Discord helps

[brianjamesmatthews]

I figured it out. There is an open PR in vue-demi right now addressing this: vueuse/vue-demi#105
Adding an alias like the suggested workaround fixed the issue:

alias: {
  '@vue/composition-api/dist/vue-composition-api.esm.js': '@vue/composition-api/dist/vue-composition-api.mjs'
}

Thanks!

[raygence13]

I figured it out. There is an open PR in vue-demi right now addressing this: vueuse/vue-demi#105 Adding an alias like the suggested workaround fixed the issue:

alias: {
  '@vue/composition-api/dist/vue-composition-api.esm.js': '@vue/composition-api/dist/vue-composition-api.mjs'
}

Thanks!

could you elaborate on where/which file to add this alias?