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

news2024/9/24 7:25:06

起因

工作原因需要研究 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 解释(TODO)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1606386.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

hbase-2.2.7分布式搭建

一、下载上传解压 1.在官网或者云镜像网站下载jar包 华为云镜像站:Index of apache-local/hbase/2.2.7 2.上传到linux并解压 tar -zxvf hbase-2.2.7-bin.tar.gz -C /usr/locol/soft 二、配置环境变量 1. vim /etc/profile export HBASE_HOME/usr/local/soft/h…

基于大数据的手机销售数据分析可视化系统,爬取京东和淘宝的的手机商品数据进行分析,Flask,Python,数据可视化

介绍 该系统主要是通过爬取京东和淘宝的的手机商品数据进行分析。爬虫python脚本通过打开浏览器授权登录后按照搜索“手机”关键字后出现的商品列表进行爬取,获取标题名,解析付款人数,品牌,评论人数,发货地&#xff0…

Java相关的定时任务

就现在而言,关于定时任务有各种各样的架构:Java 定时器类【Timer】,Spring定时器类【Scheduled】,Quartz分布式定时器类,xxl-job分布式任务调度平台。xxl-job是一款轻量级定时任务可以分布式部署的调度平台。很多大的公…

AIDE:自动驾驶目标检测的自动数据引擎

AIDE:自动驾驶目标检测的自动数据引擎 摘要IntroductionRelated WorksMethodData FeederModel Updater4 Experiments 摘要 自动驾驶车辆(AV)系统依赖于健壮的感知模型作为安全保证的基石。然而,道路上遇到的物体表现出长尾分布&a…

SpringCloud系列(5)--SpringCloud微服务工程公共部分提取

前言:在上一章节中我们创建了两个个SpringCloud工程,但在两个工程中分别存在着一些重复的部分,例如重复的实体类(如图所示),这样会造成系统的冗余,所以我们需要把公共的类提取到一个工程里&…

50.HarmonyOS鸿蒙系统 App(ArkUI)web组件实现简易浏览器

50.HarmonyOS鸿蒙系统 App(ArkUI)web组件实现简易浏览器 配置网络访问权限: 跳转任务: Button(转到).onClick(() > {try {// 点击按钮时,通过loadUrl,跳转到www.example1.comthis.webviewController.loadUrl(this.get_url);} …

docker 启动时报错

docker 启动时报如下错误 Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details 因为安装docker时添加了镜像源 解决方案: mv /etc/…

windows部署pgsql

1、下载:Download PostgreSQL Binaries 2、创建data目录作为数据目录 3、初始化 bin目录执行命令: .\initdb.exe -D E:\pgsql\data -E UTF-8 --localechs -U postgres -W 输入密码直到完成 4、启动数据库 .\pg_ctl.exe -D E:\pgsql\data -l logfil…

【CTF-Crypto】数论基础-01

数论基础 【专题说明】本系列文章主要根据B站Up主Alice-Bob学习数论基础知识,通过该系列文章,你可以对一些网安信安考试内容有一定了解,同时对于CTF中密码学方向的赛题在数论部分有更深的理解,如有不当之处,师傅们及时…

华为手机无法弹出wifi上网认证页面处理

华为手机无法弹出wifi上网认证页面 连wifi后跳到上图界面卡住,不跳转到单位的上网认证界面。 打开手机的设置应用,点击上面的WLAN选项。 点击上面的更多WLAN设置选项。 关闭WLAN安全检测就可以正常弹出上网认证界面, 正常弹出上网认证界面&a…

web安全学习笔记(12)

记一下第十六节课的内容。 一、jQuery Ajax 我们要先下载jQuery。 首先我们转移到template目录下,准备把jQuery下载到这下面。 直接wget下来就可以了。 这样我们就下载好了jQuery,下面我们学习如何使用。 jQuery 调用 ajax 方法 格式:$.…

量子时代加密安全与区块链应用的未来

量子时代加密安全与区块链应用的未来 现代密码学仍然是一门相对年轻的学科,但其历史却显示了一种重要的模式。大多数的发展都是基于几年甚至几十年前的研究。而这种缓慢的发展速度也是有原因的,就像药物和疫苗在进入市场之前需要经过多年的严格测试一样&…

高通滤波器(理解高通滤波器为什么会把无像素变化区域设置为0)

为什么所有的高通滤波器会把图像的背景色设置为0? 首先根据公式4.9-1,低通滤波器的定义,超过某个频率是百分之百通过的,为1.所以这里的含义是低于某个频率就会百分之百为0,完全不通过,那么可以肯定在H(0,0…

3ds Max2024安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 3ds Max是一款基于PC系统的强大3D建模、渲染和制作软件,广泛应用于游戏开发、影视后期制作、建筑设计、工业设计等多个领域。其拥有丰富的建模工具,可轻松创建逼真的三维场景和模型;同时&#…

基于SpringBoot的“论坛管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“论坛管理系统”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 论坛管理系统结构图 前台首页功能界面图 用户登录…

【GDAL-Python】4-在Python中使用GDAL进行投影转换、影像重采样以及裁剪栅格数据

文章目录 1-介绍1.1 主要内容1.2 EPSG 2-代码实现2.1 数据介绍2.2 代码实现2.3 结果及效果显示 3.参考资料 1-介绍 1.1 主要内容 (1)在本教程中,将介绍如何在 Python 中使用 gdalwarp 将栅格数据重新投影到不同的坐标参考系,影像…

hexo实现个人博客及涉及的技术学习

一、背景 最近,一直想做一个属于自己的网站.可以从零开始搭建一个网站,顺便可以把日常中学到的技术用于实战,还可以顺便记录自己的所思所感,记录成长的过程. 方案 一开始的方案是从零开始,模仿常见个人博客的设计,基于vueSpringbootMySQL的去实现网站. 新建项目之后,发现vu…

OSPF星型拓扑和MGRE全连改

一,拓扑 二,要求 1,R6为ISP只能配置IP地址,R1-R5的环回为私有网段 2,R1/4/5为全连的MGRE结构,R1/2/3为星型的拓扑结构, 3,R1为中心站点所有私有网段可以互相通讯,私有网段…

STM32之不使用MicroLIB

一、microlib介绍 microlib 是缺省 C 库的备选库,功能上不具备某些 ISO C 特性。 microlib 进行了高度优化以使代码变得很小,功能比缺省 C 库少,用于必须在极少量内存环境下运行的深层嵌入式应用程序。 二、不使用microlib的原因 由于microlib不支持C++开发,因此在使用C…

Hotcoin 热门资产上新速报:以太坊互操作性基础设施Omni Network(OMNI)

Hotcoin持续为全球600万用户发掘优质潜力资产,热门币种交易上热币。一文快速了解今日上新资产:Omni Network(OMNI) 推荐指数 8.4 交易对 OMNI/USDT 交易时间 4月17日 GMT8 20:30 资产赛道 Layer1 项目简介 Omni 是以太坊…