Vue 3:模块“././节点_模块/vue/dist/vue”没有导出成员

Question

更新我的npm包后，从“vue”模块导入的一些内容开始显示错误：

TS2305:模块‘./../节点_模块/vue/dist/vue“’没有导出成员'X‘。

其中X是nextTick、onMounted、ref、watch等。在为项目服务时，Vue说它“编译失败”。WebStorm实际上识别了导出，给出了建议并显示了类型，但是错误会被显示出来。有些出口，比如计算和defineComponent，运行得很好。

我试过的是：

• 回滚到以前使用的Vue版本"3.2.2“> "3.0.11”。它使上述类型的错误消失，但应用程序完全停止工作，在控制台中显示了大量TypeError: Object(...) is not a function错误，并且根本没有呈现应用程序。在终端中引入了一些新的警告："export 'X' (imported as '_X') was not found in 'vue'，其中X是createElementBlock，createElementVNode，normalizeClass和normalizeStyle。
• 回滚其他依赖项。不幸的是，我尝试过的这些方法都没有解决这个问题。
• 手动声明整个“vue”模块。我们可以用shims-vue.d.ts声明“vue”模块的导出，它实际上会使错误消失，然而，这似乎是一个可怕的、耗时的解决方案，因此如果可能的话，我会选择选择更好的解决方案。

我的全部依赖项列表：

"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"
 }

链接以复制

Answer 1

正如我在注释中提到的，在我的例子中，诀窍是将TypeScript从"3.x.x“版本更新为"4.3.5”(其他4.x.x版本也应该有效，但我自己还没有尝试)。至于为什么会出现这种情况，我的理论是，在更新之后，一些与vue相关的依赖与3.x版本的TypeScript不兼容。

Answer 2

名为composition的导出是不可用的，这意味着在某些只有默认导出的地方，vue是Vue 2。由于Vue 3位于dependencies中，并且锁文件和node_modules都被刷新，这意味着Vue 2是某些直接依赖项的嵌套依赖项。

这个问题需要在锁文件中进行调查。这表明@vue/cli-plugin-unit-jest@4.5.13依赖于vue-jest@3，而依赖于vue@2。

一个可能的解决方案是将@vue/cli-plugin-unit-jest升级到最新版本next。同样的情况也适用于其他@vue/cli-*包，因为它们有匹配的版本。

Answer 3

TypeScript的版本至少需要4.3.5。在我的例子中，它不适用于4.0.3