Can't resolve @vue/composition-api even if it is installed

[ghost]

Hello

Since yesterday, I got this error :

/node_modules/vue-demi/lib/index.mjs
Module not found: Error: Can't resolve '@vue/composition-api/dist/vue-composition-api.mjs' in '/usr/src/app/node_modules/vue-demi/lib'

But, @vue/composition-api is installed...

Here is my package.json:

{
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@casl/ability": "4.1.6",
"@casl/vue": "1.1.1",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@fullcalendar/common": "5.x",
"@fullcalendar/core": "5.x",
"@fullcalendar/daygrid": "5.x",
"@fullcalendar/interaction": "5.x",
"@fullcalendar/list": "5.x",
"@fullcalendar/timegrid": "5.x",
"@fullcalendar/vue": "5.x",
"@vue/composition-api": "1.0.0-beta.22",
"@vueuse/core": "4.0.0",
"animate.css": "4.1.1",
"apexcharts": "3.23.0",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"bootstrap": "4.6.0",
"bootstrap-vue": "2.21.1",
"chart.js": "2.9.4",
"cookie": "^0.4.1",
"core-js": "3.8.1",
"dotenv": "^10.0.0",
"echarts": "4.8.0",
"flatpickr": "^4.6.9",
"js-cookie": "^2.2.1",
"jsonwebtoken": "8.5.1",
"leaflet": "1.6.0",
"pdfjs-dist": "^2.10.377",
"portal-vue": "2.1.7",
"postcss-rtl": "1.7.3",
"prismjs": "1.19.0",
"quill": "^1.3.7",
"swiper": "5.4.5",
"uuid": "8.3.2",
"vee-validate": "3.4.5",
"vue": "2.x",
"vue-apexcharts": "1.6.0",
"vue-autosuggest": "2.2.0",
"vue-awesome-swiper": "4.1.1",
"vue-chartjs": "3.5.0",
"vue-cleave-component": "2.1.3",
"vue-clipboard2": "0.3.1",
"vue-context": "6.0.0",
"vue-echarts": "5.0.0-beta.0",
"vue-feather-icons": "5.1.0",
"vue-flatpickr-component": "^8",
"vue-form-wizard": "0.8.4",
"vue-good-table": "2.21.0",
"vue-json-excel": "^0.3.0",
"vue-perfect-scrollbar": "0.2.1",
"vue-prism-component": "1.1.1",
"vue-quill-editor": "3.0.6",
"vue-ripple-directive": "2.0.1",
"vue-router": "3.4.9",
"vue-select": "3.11.2",
"vue-slider-component": "3.2.11",
"vue-sweetalert2": "4.1.1",
"vue-toastification": "1.7.8",
"vue-tour": "1.5.0",
"vue-tree-halower": "1.8.3",
"vue2-leaflet": "2.5.2",
"vuedraggable": "2.24.3",
"vuex": "3.6.0",
"vuex-persistedstate": "^4.0.0-beta.3",
"worker-loader": "^3.0.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.9",
"@vue/cli-plugin-eslint": "~4.5.9",
"@vue/cli-plugin-router": "~4.5.9",
"@vue/cli-plugin-vuex": "~4.5.9",
"@vue/cli-service": "~4.5.9",
"@vue/eslint-config-airbnb": "^5.3.0",
"@vuepress/plugin-medium-zoom": "^1.7.1",
"babel-eslint": "^10.0.3",
"eslint": "6.8.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "6.2.2",
"sass": "1.32.*",
"sass-loader": "^10.1.0",
"vue-template-compiler": "2.x"
}
}

[dragomirweb]

yeah same for me, i'm using vueuse which has vue-demi as any version.
Uncaught Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

[fk1blow]

there should be a better way of handling vue-demi dependency and have better control over time.

We have pinned down vueuse-core to 5.1.3 but having a " * " version dep on vue-demi, pinning to a vueuse specific version, becomes useless.

using the following in package.json:

"@vueuse/core": "^5.1.3"
"@vue/composition-api": "1.0.5"
"typescript": "4.2.4"

[fk1blow]

@agennari if you re using yarn(afik npm doesn't support this out of the box), you could use

"resolutions": {
  "@vueuse/**/vue-demi": "0.11.4"
}

and place it inside your package.json.

This will force vue-demi to resolve to the version that "worked"

[ghost]

Thanks, works now !

[fk1blow]

@agennari i don't think you should close this as it's still a bug, imho at least.

[patrikengborg]

Yes, I have the same issue, and I don't use Yarn. So please re-open this.

[fk1blow]

@patrikengborg opened #113 b/c of this!

[ghost]

Sorry, re-opened

[saranchonkau]

@agennari @patrikengborg added possible solution here
#113 (comment)

[antfu]

#106

[WellingtonJr]

there should be a better way of handling vue-demi dependency and have better control over time.

We have pinned down vueuse-core to 5.1.3 but having a " * " version dep on vue-demi, pinning to a vueuse specific version, becomes useless.

using the following in package.json:

"@vueuse/core": "^5.1.3" "@vue/composition-api": "1.0.5" "typescript": "4.2.4"

worked for me, thanks