Closed schl3ck closed 4 years ago
I had the same issue, it's because you are declaring any reactive elements (ref() / reactive()) before the plugin is installed in your Vue instance.
You can fixing by calling Vue.use(VueCompositionAPI)
before importing any of your components/store
Thanks for the hint.
Rearranging the imports didn't solve the error, but I got it working by importing the views dynamically instead of at the top of router/index.js
.
I solved this problem by change version @vue/composition-api
.
1) Please check the dependencies version compatible with @vue/composition-api
.
2) Remove Node module
package.json:
"dependencies": {
"@casl/ability": "^5.3.1",
"@casl/vue": "1.x",
"@mdi/js": "^5.9.55",
"@vuetify/cli-plugin-utils": "^0.0.9",
"@vueuse/core": "^4.8.1",
"apexcharts-clevision": "^3.28.3",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"chart.js": "2.9.4",
"core-js": "^3.6.5",
"firebase-functions": "^3.15.7",
"jsonwebtoken": "^8.5.1",
"leaflet": "^1.7.1",
"prismjs": "^1.23.0",
"vue": "^2.6.14",
"vue-apexcharts": "^1.6.1",
"vue-chartjs": "^3.5.1",
"vue-i18n": "^8.24.5",
"vue-prism-component": "1",
"vue-router": "^3.5.2",
"vue2-leaflet": "^2.7.1",
"vue2-perfect-scrollbar": "^1.5.0",
"vuedraggable": "^2.24.3",
"vuetify": "^2.5.5",
"vuex": "^3.4.0"
},
package-lock.json:
"node_modules/@vue/composition-api": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.4.tgz",
"integrity": "sha512-3OzvW8RS7/7kxE+SDXm8zSLZRy9GtCYwyLYdnGtIsqXRSt5nWkA7zu80Cw8Vg+67jglrpMdVBBy7AUXAB34ZSw==",
"optional": true,
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"vue": ">= 2.5 < 3"
}
},
"node_modules/vue-demi": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.11.4.tgz",
"integrity": "sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
**Focus on here:**
"@vue/composition-api": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.4.tgz",
"integrity": "sha512-3OzvW8RS7/7kxE+SDXm8zSLZRy9GtCYwyLYdnGtIsqXRSt5nWkA7zu80Cw8Vg+67jglrpMdVBBy7AUXAB34ZSw==",
"optional": true,
"peer": true,
"requires": {
"tslib": "^2.3.0"
}
},
3) npm install
This is happening starting release 1.0.1. I don't know what exactly is causing this, here are changes in that release: https://github.com/vuejs/composition-api/compare/v1.0.0...v1.0.1
I get the following error upon loading the app in my browser:
I don't know why it suddenly popped up, but I didn't manage to load my app again since then.
You can find a repro with instructions here: https://github.com/schl3ck/vuejs-composition-api-issue-544
I think the issue is here in line 42. Shouldn't that be
assert(constructor, `No vue dependency found.`)
?https://github.com/vuejs/composition-api/blob/5484bb7fec15dfa8ac316c5266ef3cf00820b1a0/src/runtimeContext.ts#L38-L46
In my case
vueConstructor
is falsey andvueDependency
has a value.