SSF0SSF0
首页
前端
  • Node
  • Go
  • Python
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
  • 开源项目
Timeline
Github
标签
分类
首页
前端
  • Node
  • Go
  • Python
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
  • 开源项目
Timeline
Github
标签
分类
  • HTML

    • html1
    • html2
  • CSS

    • Flex 布局常见问题与解决方案
  • JavaScript

    • 数据类型及引用问题
    • 处理 Blob 类型文件下载问题总结
    • localStorage 与 sessionStorage 区别
    • JavaScript 中的 script 标签问题详解
    • JavaScript 中的 this 指向问题详解
    • SessionStorage踩坑记录
    • 动态加载 JS 脚本方法对比
    • 浏览器页面关闭场景下的数据上报
    • HTTP流式接口详解与封装实践
    • JavaScript 中 this 绑定与解构:为什么 Pinia Store 可以解构,但 Class 实例方法不行?
  • es6

    • Promise
    • es6 模块导出方式全解析
    • reduce
    • forEach 中使用 async/await 的异步陷阱
  • Vue2

    • created VS mounted 发起异步请求
    • vue2-2
  • Vue3

    • Vite + Vue3 修改 element-plus 源码
    • Vue v-if 与 v-show
    • Vue3 ref 获取组件
    • Vue3 路由传参
    • 父子组件与组件里 Hooks 加载顺序
    • 第三方组件传入参数TS提示
    • Vue3 Props 在 Hooks 中的响应性处理
    • Vue Router 的两种历史模式及部署配置详解
    • 在Vue 3项目中顺利集成Tailwind CSS的完整指南
    • Vue Scoped CSS 深度解析
    • Vue 3 Teleport 组件完全指南:从原理到实战
    • Vant List 组件中双向绑定 loading 的注意事项
    • Vue 3 + Vite 中的路径别名与静态资源处理深度解析
    • 获取图片高度
    • 深入理解 Pinia:storeToRefs vs toRefs - 避开 TypeScript 类型推断的坑
  • webSocket

    • WebSocket 鉴权入门(实战版):握手票据 / 首帧鉴权 + 连接级 cid
  • Electron

    • 快速构建 electron + vue3 项目
  • TS

    • TS 泛型
    • 记录模板使用断言的问题
    • type 与 interface
  • WebPack

    • Webpack 介绍
  • Vite

    • Vite CLI 常见命令
    • vite 与 webpack 比较
    • Vite base 配置与 public 静态资源路径问题
  • 客户端数据库

    • IndexedDB 索引陷阱:字段重命名后索引返回旧数据
    • IndexedDB 事务陷阱与最佳实践:TransactionInactiveError 完全解析
  • UniApp

    • uni-app + Monorepo + 微信小程序热更新失效问题排查与结论总结
    • Monorepo + uni-app 开发中监听 / 热更新机制差异与解决方案
    • uni-app 运行与编译原理梳理
    • 为什么 uni-app 在 Monorepo 中必须做「环境区分」,而 Web 项目却不用?
  • 项目工程

    • 前端代码风格
    • Vue3 项目规范
    • npm 镜像问题
    • 包管理工具
    • 使用 engines 限制开发环境依赖
    • 打包与shell交互指定模式
    • Monorepo示例
    • PC 项目兼容 uni-app:基于 pnpm Monorepo 的工程化重构实践
    • Vue3 + Vite + pnpm Monorepo 迁移问题指南
    • 前端工程化:深入理解 npm 依赖管理机制
    • pnpm 修改依赖源码打包报错
    • 代码片段
  • 移动端

    • 浏览器跳转外部应用时请求状态码问题
  • 记录一下小程序
  • 控制浏览器正确保存网站账号密码的技巧
  • 信息泄露
  • 使用Gulp实现前端项目哈希化压缩打包
  • 前端缓存策略与文件哈希化的关联解析
  • 浏览器刷新方式与 Vue 生命周期、缓存行为解析
  • 浏览器消息铃声实现记录

pnpm 修改依赖源码打包报错

背景

在使用 Element Plus 的项目中,Rollup 报错:"affixProps" is not exported by "node_modules/.../affix.mjs"。具体错误示例如下:

x Build failed in 4.59s
error during build:
RollupError: "affixProps" is not exported by "node_modules/.pnpm/[email protected][email protected]/node_modules/element-plus/es/components/affix/src/affix.mjs", imported by "node_modules/.pnpm/[email protected][email protected]/node_modules/element-plus/es/components/affix/src/affix2.mjs".
file: C:/project/designCode/node_modules/.pnpm/[email protected][email protected]/node_modules/element-plus/es/components/affix/src/affix2.mjs:5:9
3: import '../../../utils/index.mjs';
4: import '../../../hooks/index.mjs';
5: import { affixProps, affixEmits } from './affix.mjs';
            ^
6: import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
7: import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
    at getRollupEror (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at error (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
    at Module.error (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13651:16)
    at Module.traceVariable (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14099:29)
    at ModuleScope.findVariable (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:11802:39)
    at Identifier.bind (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7296:40)
    at Property.bind (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4732:23)
    at ObjectExpression.bind (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4728:28)
    at CallExpression.bind (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4728:28)
    at CallExpression.bind (file:///C:/project/designCode/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:8961:15)
 ELIFECYCLE  Command failed with exit code 1.

这通常表明,Element Plus 内部组件文件(affix2.mjs)引用了 affixProps,但在 affix.mjs 中没有进行对应的导出。常见原因包括:

  1. 在 node_modules 中手动修改了 Element Plus 源码,破坏了内部的依赖关系;

  2. 修改了 Element Plus 及其子依赖(如 utils、hooks、shared 等)的不同版本文件,导致某些导出名称不再一致;

  3. 不同版本的 Element Plus 之间存在接口变化,主组件与子组件的导出方式或名称不兼容。

具体案例

• 项目 A 使用了 Element Plus 2.7.8;

• 项目 B 使用了 Element Plus 2.6.0;

• 项目 A 手动替换了 es 与 lib 文件夹,使 Element Plus 源码被改动;

• 项目 B 在构建时却出现了 "affixProps is not exported by affix.mjs" 的报错,无法正常打包。

核心分析

  1. 手动修改 node_modules 破坏依赖结构

    • 修改了 node_modules 中的 Element Plus 文件后,affix2.mjs 与 affix.mjs 之间的引用不匹配,导致构建报错。
  2. pnpm-store 全局缓存与依赖复用机制

    • pnpm 默认会将同版本依赖缓存到同一个全局 store 下,并通过链接方式复用;

    • 即使两个项目使用不同版本的 Element Plus(如 2.6.0 和 2.7.8),它们可能共享相同版本的子依赖(如 utils、hooks、shared 等模块);

    • 当在一个项目中修改了这些共享的子依赖后,另一个项目在安装时也会链接到这些被修改过的文件,从而导致打包错误;

    • 这种依赖复用是 pnpm 的核心特性 —— 相同的依赖版本在全局 store 中只存储一次,不同项目通过符号链接或硬链接方式复用,以节省磁盘空间。

解决方案

  1. 避免在 node_modules 中直接改动依赖

    • node_modules 通常应该視为只读内容,重新安装依赖后,手动改动会被覆盖;

    • 如确有必须变更第三方库的场景,可使用 patch-package 或 Fork 并维护自己的分支,保证依赖可追溯、可还原。

  2. 删除 node_modules 并强制重新安装

    • 若发现已经污染了依赖,可先删除 node_modules,然后执行 pnpm install --force 等命令,重新下载干净版本;

    • 若全局 store 也被破坏,需考虑更改 pnpm storeDir 位置或清空后重装。

  3. 确认依赖版本与兼容性

    • 检查 Element Plus 版本及其配套依赖版本是否一致;

    • 如果存在与项目不兼容的版本,应及时切换到正确版本或升级到已有修复的版本。

  4. 合理分离或配置 store

    • 在多 Node.js 环境或团队协作场景下,可使用 .npmrc 或命令行参数 --store 为项目指定独立的 pnpm store,避免因为依赖复用而相互影响;

    • CI/CD 环境也应统一安装流程,保证同样的依赖版本和缓存配置。

总结

"affixProps is not exported" 等报错多由手动修改依赖或版本、缓存不一致引起。为避免相关问题,需注意:

  1. 尽量保持依赖的纯净状态,勿直接修改 node_modules;

  2. 若需要定制第三方库,可使用 patch-package 或 Fork;

  3. 遇到打包报错时,可先尝试删除 node_modules 并强制重新安装;

  4. 减少不同项目之间对同一依赖版本的重复改动,或合理配置 pnpm store 以避开全局依赖冲突。

说明

由于 pnpm 的依赖复用机制,即使两个项目使用不同版本的 Element Plus(如 2.6.0 和 2.7.8),它们可能共享相同版本的子依赖(如 utils、hooks、shared 等模块),项目 A 修改了 es 与 lib 的 Element Plus 的源码,而项目 B 也引用了 Element Plus 的源码,修改到了公共的依赖,导致打包时引用到错误内容。

最后更新时间:
贡献者: 何风顺
上一页
前端工程化:深入理解 npm 依赖管理机制
下一页
代码片段