pnpm - Failed to resolve loader: cache-loader. You may need to install it.

news/2024/5/18 23:29:43

起因

工作原因需要研究 vue-grid-layout 的源码,于是下载到本地。因为我习惯使用 pnpm,所以直接用 pnpm i 安装依赖,npm run serve 启动失败。折腾了一番没成功。
看到源码里有 yarn.lock,于是重新用 yarn install 安装依赖,成功启动。

用 yarn 安装可以成功运行的项目, 用pnpm 安装后却运行失败。 挺有意思的,于是有了这篇 blog。

以前也遇到类似问题:使用相同的包管理器,但是 node 版本不同,有的 node 版本安装的包能成功运行,有的不能。


测试 npm yarn pnpm

请出今日受害者:vue-grid-layout。在 github 上下载源码.zip。解压后复制成三份:

  • vue-grid-layout-npm
  • vue-grid-layout-yarn
  • vue-grid-layout-pnpm

分别使用 npm yarn pnpm 安装依赖(版本 node 16.0.0,yarn 1.22.11,pnpm 7.27.0)。安装过程中都报了一些 warning 或 error,暂时忽略。启动项目 npm run serve

npm 和 yarn 均可成功运行。pnpm 启动失败,报错: Failed to resolve loader: cache-loader. You may need to install it.


node-linker=hoisted

google 找到 pnpm issue: Failed to resolve loader: cache-loader You may need to install it.

pnpm maintainer 回复:
在这里插入图片描述
按照他的方法尝试。新建项目 vue-grid-layout-pnpm-hoisted,设置好 .npmrc 后 pnpm i 。再启动,成功!

官方描述 node-linker=hoisted 的含义:

在这里插入图片描述

pnpm 默认(node-linker=isolated) 安装的 node_modules,子文件夹有30个。下图红框部分可以看到使用了 symbolic link:

在这里插入图片描述

用 npm、yarn、或者设置了 node-linker=hoisted 的 pnpm 安装的 node_modules:

在这里插入图片描述
子文件夹非常多(npm 997,yarn 994,hoisted pnpm 1045),因为所有直接间接的依赖都平铺在 node_modules 中了


使用原版 pnpm,手动安装缺少的包

虽然上面使用 node-linker=hoisted 后,可以继续用 pnpm 。但是失去了使用 pnpm 的意义了。

还是用“原版”的 pnpm 测试(不修改 node-linker),在 vue-grid-layout-pnpm 项目中手动安装 cache-loader,启动仍报错 Failed to resolve loader: babel-loader'

手动安装 babel-loader,启动报错:Syntax Error: TypeError: this.getOptions is not a function

在这里插入图片描述

google了一下,是包和包之间版本不匹配。但是通过报错信息看不出是哪个文件哪个包。在 node_modules 下全局搜索 this.getOptions,锁定嫌疑人 babel-loader。用 pnpm why 查看:

在这里插入图片描述

需要安装8.3.0版本,但是刚刚安装的是9.1.3版本。重新安装:pnpm i babel-loader@8.3.0,启动报错 Failed to resolve loader: vue-loader
一个一个安装,不知道什么时候才到尽头,放弃了。还是研究研究为什么 pnpm 不安装这些包吧。


为什么 pnpm 没安装 cache-loader?

其实 pnpm 安装了,但是 webpack 没找到。
篇幅太长,另开一篇 blog 解释


http://www.mrgr.cn/p/03034640

相关文章

网络拓扑—WEB-IIS服务搭建

均使用Windows Server 2003进行搭建目录WEB-IIS服务搭建网络拓扑配置网络IISPC安装IIS服务配置IIS服务(默认站点)PC机访问网页配置IIS服务(新建站点)PC机访问网页 WEB-IIS服务搭建 网络拓扑//交换机忽略不计 IIS服务IP:192.168.1.1 PC机IP:192.168.1.2配置网络 IISPC安装…

RocketMQ定时/延时消息

什么是延时消息 当消息写入到Broker后,在指定的时长后才可被消费处理的消息,称为延时消息。 采用RocketMQ的延时消息可以实现定时任务的功能,而无需使用定时器。典型的应用场景是,电商交 易中超时未支付关闭订单的场景,12306平台订票超时未支付取消订票的场景。在电商平台…

vue 请求php接口 header 传自定义参数 提示cors 跨域问题

前端地址 http://192.168.0.125:4021 请求后端地址的时候报 from origin http://192.168.0.125:4021 has been blocked by CORS policy: Request header field userid is not allowed by Access-Control-Allow-Headers in preflight response. 大概意思是请求 header里有个…

<计算机网络自顶向下> 路由器组成

路由器结构概况 路由:运行路由选择算法/协议(RIP, OSPF, BGP)生成路由表转发:从输入到输出链路交换数据包-根据路由表进行分组的转发中间的fabric是用来接收输入的分组交给输出端口的,完成局部的转发(根据…

Android开发中Button背景颜色不能修改问题及解决方法

问题: 使用Android Studio进行android开发时,不管是拖出来的Button,还是自己设置的Button,Button的背景色一直无法修改,呈现系统默认的紫色。 例如我的代码,预览按钮的时候应该是彩色,但还是默认的颜色:紫色 问题原因: 出现该问题的原因主要是因为使用Android Studio …

用“芯”服务,安安“芯芯” 经纬恒润功能安全软件库SAFETY BASE V1.0正式发布

基于目前的市场需求,经纬恒润产品安全团队潜心研发,现正式推出满足ISO26262的安全软件库SAFETY BASE V1.0(满足EGAS L3)。 当前,半导体厂商在进行满足功能安全芯片开发时,除由其自身实现的安全机制以外,还会在安全手册(safety manual)中提出大量需要被自主研发的…

记录MySQL分页数据重复问题

1、准备数据2、sql查询 1、查询第一页的结果 select * from test limit 0, 3;2、查询第二页的结果 select * from test limit 1, 3;3、查询第三页的结果 select * from test limit 2, 3;3、结果 由上图所示,每次分页都有重复数产生 4、原因我们知道 order by 排序的时候,如果…

JDK源码分析-LinkedList

概述 相较于 ArrayList,LinkedList 在平时使用少一些。 LinkedList 内部是一个双向链表,并且实现了 List 接口和 Deque 接口,因此它也具有 List 的操作以及双端队列和栈的性质。双向链表的结构如下:它除了作为List使用,还可以作为队列或者栈来使用。 public class LinkedL…

数据结构入门——排序(代码实现)(下)

int GetMidi(int* a, int left, int right) {int mid (left right) / 2;// left mid rightif (a[left] < a[mid]){if (a[mid] < a[right]){return mid;}else if (a[left] > a[right]) // mid是最大值{return left;}else{return right;}}else // a[left] > a[mid…

戴森球计划:关于打帆星距离与建筑效率的精确计算

来源贴吧: 作者:wolray 日期:2024-03-05结论放开头:由于俯仰角限制,打帆建筑效率(可打帆建筑面积与球面占比)的极限最大值为35.9%,星球轨道越远,太阳帆轨道半径越大,越接近该值,但变化微乎其微。最佳打帆策略:离恒星最近的潮汐锁定星,打最小轨道的帆。该结论与小马…

Docker镜像使用(一)

1.1 镜像获取 从 Docker 镜像仓库获取镜像的命令是docker pull。其命令格式为:docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签]拉去镜像之后我们可以使用docker image ls查看镜像运行我们拉去的镜像: docker run -it --rm hello-worlddocker run就是运行容…

VBA技术资料MF144:将PDF首页作为对象插入工作表

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

明日方舟游戏助手:一键完成日常任务 | 开源日报 No.233

MaaAssistantArknights/MaaAssistantArknights Stars: 11.6k License: AGPL-3.0 MaaAssistantArknights 是一款《明日方舟》游戏的小助手&#xff0c;基于图像识别技术&#xff0c;支持一键完成全部日常任务。 刷理智、掉落识别及上传企鹅物流智能基建换班、自动计算干员效率…

stm32实现hid鼠标

启动CubelMX 选择芯片&#xff08;直接输入stm32f103zet6) 设置时钟 如下图 usb设置 配置usb设备 调试端口设置 配置时钟 项目输出设置 打开工程&#xff08;后记&#xff1a;此工程含有中文不能编译通过) 配置项目 配置调试器 编译无法通过 删除路径中的中文&#xff0c;以及…

快速部署 微软开源的 Garnet 键值数据库

快速部署 微软开源的 Garnet 键值数据库 Garnet 是 Microsoft Research 推出的一种新型远程缓存存储,其设计速度极快、可扩展且延迟低。 Garnet 在单个节点内是线程可扩展的。它还支持分片集群执行、复制、检查点、故障转移和事务。它可以在主内存以及分层存储(例如 SSD 和 A…

Sentinel如何持久化数据到Nacos?

默认情况下 Sentinel 只能接收到 Nacos 推送的消息,但不能将自己控制台修改的信息同步给 Nacos,如下图所示:但是在生成环境下,我们为了更方便的操作,是需要将 Sentinel 控制台修改的规则也同步到 Nacos 的,所以在这种情况下我们就需要修改 Sentinel 的源码,让其可以实现…

k8s日常动手实践 ~~ pod访问 pod请求 k8s api ~ 含新版带curl的busybox镜像

前言&#xff1a; 可以使用 Kubernetes API 获取集群信息。使用 Service Account&#xff08;SA&#xff09;进行身份验证&#xff0c;可以以安全的方式访问 Kubernetes API&#xff0c;而无需在 Pod 中使用明文凭据。 以下是一个使用 Service Account 访问 Kubernetes API 获…

mysql系列04---索引及性能分析

1、索引的结构mysql索引的数据结构,对经典的B+Tree进行了优化,在原B+Tree上增加了一个指向相邻叶子结点的链表指针,就形成了一个带有顺序指针的B+Tree,提高了区间访问的性能。 选择B+Tree的优点: a、相对于二叉树,层级更少,搜索效率更高 b、相对于B-Tree,B+Tree只在叶子节…

HarmonyOS开发案例:【图片编辑】

介绍 本篇Codelab是基于ArkTS的声明式开发范式的样例&#xff0c;主要介绍了图片编辑实现过程。样例主要包含以下功能&#xff1a; 图片的解码。使用PixelMap进行图片编辑&#xff0c;如裁剪、旋转、亮度、透明度、饱和度等。图片的编码。 相关概念 [图片解码]&#xff1a;读…