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:
- Rollback to the previously used Vue version "3.2.2" > "3.0.11". It makes the abovementioned type errors disappear, but the app stops working entirely, showing lots of
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. - Rollback other dependencies. None of the ones that I tried helped fix the problem, unfortunately.
- Manually declare the entirety of 'vue' module. We can declare the 'vue' module exports in shims-vue.d.ts, and it actually makes the errors disappear, however, this seems like a terrible, time-consuming workaround, so I would opt out for a better solution if possible.
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"
}