解决 vue2.7使用 pnpm 和 pinia 2.x报错

看了很多帖子,都说和vue2.7 不兼容,需要降级到2.0.x,但还是没有效果,pinia 2.x的最后更新版本也支持2.7,使用yarn可以运行,使用pnpm就报错

github.com/vuejs/pinia...

md 复制代码
2.3.1 (2025-01-20)
Bug Fixes
types: support for Vue 2.7 (d14e1a7)

环境说明

package.json

json 复制代码
 "dependencies": {
    "pinia": "2.3.1",
    "vue": "2.7.16"
  }

报错信息

报错关键字:export 'hasInjectionContext' (imported as 'hasInjectionContext') 报错信息:

sh 复制代码
error   Build errors: 
  ./node_modules/.pnpm/pinia@2.3.1_vue@2.7.16/node_modules/pinia/dist/pinia.mjs ×

File: ./node_modules/.pnpm/pinia@2.3.1_vue@2.7.16/node_modules/pinia/dist/pinia.mjs:1726:27-46
  × ESModulesLinkingError: export 'hasInjectionContext' (imported as 'hasInjectionContext') was not found in 'vue-demi' (possible exports: EffectScope, Vue, Vue2, computed, customRef, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, install, isProxy, isReactive, isReadonly, isRef, isShallow, isVue2, isVue3, markRaw, mergeDefaults, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useListeners, useSlots, version, watch, watchEffect, watchPostEffect, watchSyncEffect)
      ╭─[1726:27]
 1724 │     }
 1725 │     function useStore(pinia, hot) {
 1726 │         const hasContext = hasInjectionContext();
      ·                            ───────────────────
 1727 │         pinia =
 1728 │             // in test mode, ignore the argument provided as we can always retrieve a
      ╰────
Import traces (entry → error):

问题分析

由于 vue-demi 被 Ignored build scripts(忽略了构建脚本),它无法执行安装后的 postinstall 脚本。

为什么这会导致报错? vue-demi 是 Pinia 兼容 Vue 2 和 Vue 3 的核心桥梁。它在安装时需要运行一个脚本来检测你当前项目是 Vue 2 还是 Vue 3,并据此"切换"导出的 API。

因为 pnpm 默认禁用了未授权的脚本运行,vue-demi 没能成功切换。

结果它默认指向了 Vue 3 的导出路径,导致 Pinia 去调用 Vue 2.7 根本不存在的 hasInjectionContext,从而引发了你看到的错误。

解决办法

授权并重新构建 在终端运行以下命令:

sh 复制代码
pnpm approve-builds

空格选中 vue-demi

sh 复制代码
pnpm approve-builds
√ Choose which packages to build (Press <space> to select, <a> to toggle all, <i> to invert selection) · vue-demi
√ The next packages will now be built: vue-demi.
Do you approve? (y/N) · true
node_modules/.pnpm/vue-demi@0.14.10_vue@2.7.16/node_modules/vue-demi: Running postinstall script, done in 127ms

再次执行pnpm dev 即可

相关推荐
paopaokaka_luck6 小时前
个人综合管理小程序(echarts数据看板、健康数据记录与趋势查看、目标拆解和进度管理、日程待办与番茄钟、习惯打卡、收支统计、个人生活记录、跨模块智能提醒)
前端·javascript·spring·小程序·数据分析·echarts·生活
霸道流氓气质6 小时前
Graph Studio Web IDE 深度实战:可视化编排、断点调试与生产级运维全指南
运维·前端·ide
福兮说14 小时前
前端下载大文件,点了按钮半天没反应:fetch + blob 的三个问题和三种替代写法
前端·javascript·性能优化·文件下载
GreenTea14 小时前
我把 Agent 的 while 循环拆掉了:一种你可能没想到的 Agent 架构
前端·后端·架构
科技观察哨14 小时前
六足平台选型与纳米定位系统集成:HEB-640六自由度位移台在半导体光刻对准中的参数边界与国产替代评估
前端·人工智能
niucloud-admin15 小时前
JAVA V6 多商户商城 开发文档——web前端
前端
颜进强15 小时前
16 · NestJS LifecycleEvents 生命周期事件:五个钩子、三条边界,和 rag-server 的优雅停机
前端·后端·ai编程
今年下半年16 小时前
【VUE】整合腾讯地图、自定义区域边界、村委名称及资产统计(放大显示资产点位)
前端·javascript·vue.js
郑州光合科技余经理16 小时前
同城电商系统:库存变更怎么同步到订单
java·开发语言·前端·后端·uni-app·php·ai编程