Vue 3:模块 '"../../node_modules/vue/dist/vue"' 没有导出成员

Posted

技术标签:

【中文标题】Vue 3:模块 \'"../../node_modules/vue/dist/vue"\' 没有导出成员【英文标题】:Vue 3: Module '"../../node_modules/vue/dist/vue"' has no exported memberVue 3:模块 '"../../node_modules/vue/dist/vue"' 没有导出成员 【发布时间】:2021-10-17 19:03:57 【问题描述】:

更新我的 npm 包后,“vue”模块的一些导入开始显示错误:

TS2305:模块 '"../../node_modules/vue/dist/vue"' 没有导出的成员 'X'

其中 X 是 nextTick、onMounted、ref、watch 等。 在为项目提供服务时,Vue 说它“编译失败”。 WebStorm 实际上识别导出,建议它们并显示类型,但无论如何都会显示错误。一些导出(如 computed 和 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"
 

Link to reproduce

【问题讨论】:

删除并重新安装节点模块。如果问题仍然存在,请说明错误发生的确切位置。 @EstusFlask 我忘了提,我实际上已经尝试删除 node_modules 和 package-lock.json 并运行 npm i,但问题仍然存在。该错误发生在我尝试从“vue”模块导入某些导出的任何文件中,如下所示:imgur.com/a/dHetUBm @tony19 出现错误:在终端 (imgur.com/a/K2QcJnd)、在浏览器 (imgur.com/a/tC4UFSy) 和 Webstorm (imgur.com/a/dHetUBm) 中打开应用程序时 @tony19 当然,我可以通过安装相同的依赖项在新项目中重现错误:github.com/YourFriendlyEncounter/vue-module-error 【参考方案1】:

正如我在 cmets 中提到的,就我而言,诀窍是将 TypeScript 从版本“3.xx”更新到“4.3.5”(其他 4.xx 版本也应该可以工作,但我没有尝试过他们自己)。 至于为什么会出现这种情况,我的理论是更新后一些vue相关的依赖与TypeScript 3.x版本不兼容了。

【讨论】:

【参考方案2】:

组合 API 的命名导出不可用意味着 vue 在某些地方是 Vue 2,只有默认导出。由于 Vue 3 在 dependencies 中并且锁文件和 node_modules 都被刷新了,这意味着 Vue 2 是一些直接依赖的嵌套依赖。

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

一种可能的解决方案是将@vue/cli-plugin-unit-jest 升级到最新版本next。这可能适用于其他 @vue/cli-* 包,因为它们具有匹配的版本。

【讨论】:

感谢您的回答,我实际上找到了一个对我有用的解决方案!我再次查看了包锁,尝试更新一些依赖项,事实证明,诀窍是将 TypeScript 从版本“3.*.*”更新到“4.3.5”。令人困惑,因为 3.x 版本之前完美运行,所以我最好的猜测是 Vue 或其他一些与 Vue 相关的依赖项在更新后突然与 3.x 版本的 TS 不兼容...... 我遇到了同样的错误,升级 TypeScript 也对我有用@VladimirDeev 谢谢。这让我发疯了 @VladimirDeev 如果其他解决方案对您有用,请考虑发布答案,这可能会对其他用户有所帮助。

以上是关于Vue 3:模块 '"../../node_modules/vue/dist/vue"' 没有导出成员的主要内容,如果未能解决你的问题,请参考以下文章

升级到 vue 3 后:“找不到模块 '@vue/compiler-sfc/package.json'”

Vue.js 3 - “加载模块脚本失败:服务器以非 JavaScript MIME 类型“text/html”响应

Vue 3 和 webpack 5 - 错误:“模块属性已从依赖项中删除”

Vue????????????"???webpack-dev-server??????????????????????????????????????????????????????????

[vue]js模块导入导出export default

51Nod1247 可能的路径