pinia报错does not provide an export named ‘hasInjectionContext

你们好,我是金金金。

image.png

场景

image.png

  • 我这里是uniapp+vue3编写的一个小程序项目,在集成pinia过程当中遇到此问题,报错请求的模块 未提供 导出名hasInjectionContext(位于 pinia.mjs:6:10)

以下我项目当中vue和pinia的具体依赖版本

image.png

  • 这里插一条知识:package.json里面依赖包标识符~、^、以及不指定分别都代表什么含义,非常重要!!!

package.json里面依赖包标识符含义

  • ^2.0.27:指定的版本范围允许进行向后兼容的更新,包括小版本和次要版本的更新,但主版本号不变
    • 如果一个依赖项的版本为 ^2.0.27,那么在安装时,可以接受任何 2.x.x 版本的更新,但不接受 3.0.0 或更高版本的更新。例如,^2.0.27 允许安装 2.2.272.3.272.5.27等,但不允许安装 3.0.0
  • ~2.0.27:指定的版本范围允许进行小版本的更新,但保持主版本号不变
    • 如果一个依赖项的版本为 ~2.0.27,那么在安装时,可以接受任何 2.0.x 版本的更新,但不接受 2.1.0 或更高版本的更新。例如,~2.0.27 允许安装 2.0.372.0.5等,但不允许安装 2.1.0
  • 2.0.27:指定什么版本具体就是什么版本
    • 就是2.0.27

排查

  • 依赖安装的具体版本

image.png

image.png

由于我前面加了^所以版本在pnpm i的也就更新了~

  • vue:3.4.21
  • pinia:2.1.7

进入正题,从报错信息能看出来和pinia相关,我们来到更新日志看下是否是依赖兼容问题

image.png

image.png

  • 这里可以看到,pinia2.1.0要求vue版本 >= 3.3.0vue-demi 也需要 >= 0.14.5,我的vue版本是满足的,vue-demi(用于提供 Vue 2 兼容性的工具库)的版本也满足,vue3内置了这个工具库。

image.png

  • 我就纳闷了,依赖也能对上啊,为什么还是报错,在此期间又多次在网上寻找相关问题等解决方法,看到一篇帖子说是uniapp,我惊了。我先贴张图片,我也不清楚是不是这里影响的。

image.png

  • 随后我来到package.json,点击进去

image.png

image.png

  • 纳尼,这里依赖了vue 版本是3.2.47的,可能是被uniapp所依赖的版本影响到了,我们知道pinia``2.1.0以上需要vue版本是3.3.0及以上的,但是这个我们又是修改不了的,那么我们只有降低pinia的版本了,降到2.1.0以下供支持3.3.0以下vue版本即可。

造成error的原因

  • uniapp所依赖的vue版本 导致依赖不兼容所导致

解决

  • 降低pinia版本,我们指定安装具体的pinia版本为2.0.27

image.png

image.png

测试

  • 成功运行无报错

image.png

深究

  • 上面既然说了原因是uniapp的锅,我创了一个不是uniapp项目来验证

image.png

  • package.json

image.png

  • 我们来运行看下是否会报错,上面这个情况uniapp项目是已经报错了

image.png

成功运行。无报错!再次验证是uniapp所依赖的vue版本所导致。

总结

uniapp所依赖的vue版本 和 安装的pinia所需要的vue版本对应不上导致报错,由于我是uniapp项目 只能自降pinia版本,如果不是uniapp项目,vue版本和pinia版本对应的话,那么也不会出现这个问题。

  • 编写有误还请大佬指正,万分感谢。
  • 13
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
根据你提供的引用内容,你遇到的错误是"Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/pinia-plugin-persist.js?v=ca9d16b3' does not provide an export named 'pinaPluginPersist'"。这个错误通常是由于模块导出的名称不匹配导致的。 根据你提供的引用内容,我注意到你在Vue 3中使用了新的导入语法`import * as VueRouter from 'vue-router'`,而不是Vue 2中的`import Router from 'vue-router'`。这是因为在Vue 3中,Vue Router的导入方式发生了变化。 另外,你还提供了Vue Router的配置代码。根据你的代码,你使用了`createRouter`和`createWebHashHistory`来创建路由实例,并配置了路由规则。这些配置在Vue 3中是正确的。 然而,根据你提供的引用内容,你遇到的错误与Vue Router的配置无关。这个错误是关于一个名为'pinaPluginPersist'的导出名称的问题。根据错误信息,它指出请求的模块没有提供名为'pinaPluginPersist'的导出。 要解决这个错误,你可以检查你的代码中是否有使用'pinaPluginPersist'这个导出名称的地方。确保你正确导入和使用了这个模块,并且导出名称是正确的。如果你不确定正确的导出名称是什么,可以查看相关的文档或示例代码来获取正确的导出名称。 总结一下,你遇到的错误是由于请求的模块没有提供名为'pinaPluginPersist'的导出。你可以检查你的代码中是否正确导入和使用了这个模块,并确保导出名称是正确的。如果你需要进一步的帮助,请提供更多的代码和错误信息。 #### 引用[.reference_title] - *1* *2* [Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue-router.js?v=0d658a16‘ do....](https://blog.csdn.net/weixin_55939638/article/details/129715463)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值