After updating my npm packages, some of the imports from the 'vue' module started showing errors:
TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X'
where X is nextTick, onMounted, ref, watch etc. When serving the project, Vue says it's "failed to compile". WebStorm actually recognizes the exports, suggests them and shows types, but the error is shown regardless. Some exports like computed and defineComponent work just fine.
What I've tried:
TypeError: Object(...) is not a function errors in console and not rendering the app at all. In the terminal, some new warnings are introduced:
"export 'X' (imported as '_X') was not found in 'vue' where X is createElementBlock, createElementVNode, normalizeClass and normalizeStyle.My full list of dependencies:
"dependencies": {
"@capacitor/android": "3.0.0",
"@capacitor/app": "1.0.0",
"@capacitor/core": "3.0.0",
"@capacitor/haptics": "1.0.0",
"@capacitor/keyboard": "1.0.0",
"@capacitor/push-notifications": "^1.0.3",
"@google-pay/button-element": "^2.5.0",
"@ionic-native/core": "^5.34.0",
"@ionic-native/qr-scanner": "^5.35.0",
"@ionic-native/vibration": "^5.34.0",
"@ionic/vue": "^5.4.0",
"@ionic/vue-router": "^5.4.0",
"@j-t-mcc/vue3-chartjs": "^1.1.2",
"chart.js": "^3.4.1",
"chartjs-plugin-datalabels": "^2.0.0",
"color": "^3.1.3",
"cordova-plugin-background-mode": "^0.7.3",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-qrscanner": "^3.0.1",
"core-js": "^3.6.5",
"firebase": "^8.6.2",
"numeral": "^2.0.6",
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"secure-ls": "^1.2.6",
"uuid": "^8.3.2",
"v-cupertino": "^1.2.4",
"vue": "^3.2.0",
"vue-chartjs": "^3.5.1",
"vue-i18n": "^9.1.3",
"vue-numerals": "^4.0.6",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.1"
},
"devDependencies": {
"@capacitor/cli": "3.0.0",
"@types/jest": "^24.0.19",
"@types/uuid": "^8.3.1",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-e2e-cypress": "~4.5.0",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
}
That named exports from composition API are unavailable means that vue is Vue 2 at some place which has only default export. Since Vue 3 is in dependencies and both lock file and node_modules were refreshed, this means that Vue 2 is nested dependency of some direct dependency.
The problem needs to be investigated in lock file. It shows that @vue/cli-plugin-unit-jest@4.5.13 depends on vue-jest@3 which depends on vue@2.
A possible solution is to upgrade @vue/cli-plugin-unit-jest to the latest version, next. The same likely applies to other @vue/cli-* packages because they have matching versions.
As I mentioned in the comments, in my case, the trick was to update TypeScript from version "3.x.x" to "4.3.5" (other 4.x.x versions should work, too, but I haven't tried them myself). As to why this is the case, my theory is that some vue-related dependency became incompatible with the 3.x version of TypeScript after the update.