快应用TypeError: The ‘compilation‘ argument must be an instance of Compilation错误

完整日志:

d:\QuickAppProjects\quickapp-component\node_modules\fa-toolkit\node_modules\webpack\lib\NormalModule.js:227 throw new TypeError( ^ TypeError: The 'compilation' argument must be an instance of Compilation at NormalModule.getCompilationHooks (d:\QuickAppProjects\quickapp-component\node_modules\fa-toolkit\node_modules\webpack\lib\NormalModule.js:227:10) at d:\QuickAppProjects\quickapp-component\node_modules\fa-toolkit\node_modules\webpack\lib\LoaderOptionsPlugin.js:46:17

原因:

这个问题大多数情况下是由于 Webpack 版本不匹配 导致的。

如何验证:

在项目根目录运行以下命令,看看有哪些版本:

npx webpack -v

npm ls webpack

如果结果里有多个版本,比如:

my-project@1.0.0

├── webpack@5.91.0

└─┬ fa-toolkit@1.2.3

└── webpack@4.46.0

那就确定是版本冲突引起的。

解决办法:

强制 fa-toolkit 使用项目根目录的 webpack 实例,我们可以用 npm 的「依赖去重」机制来让所有依赖共享同一个 webpack。

1.执行以下命令:

删除旧模块

rm -rf node_modules package-lock.json

重新安装依赖并去重

npm install

npm dedupe

2.然后再执行:

npm ls webpack

3.理想输出应该变成:

│ ├─┬ babel-loader@8.2.5

│ │ └── webpack@5.76.2 deduped

│ ├─┬ stylus-loader@7.0.0

│ │ └── webpack@5.76.2 deduped

│ ├─┬ webpack-cli@5.0.2

│ │ ├─┬ @webpack-cli/configtest@2.1.1

│ │ │ └── webpack@5.76.2 deduped

│ │ ├─┬ @webpack-cli/info@2.0.2

│ │ │ └── webpack@5.76.2 deduped

│ │ ├─┬ @webpack-cli/serve@2.0.5

│ │ │ └── webpack@5.76.2 deduped

│ │ └── webpack@5.76.2 deduped

│ └─┬ webpack@5.76.2

│ └─┬ terser-webpack-plugin@5.3.14

│ └── webpack@5.76.2 deduped

└─┬ less-loader@10.2.0

└── webpack@5.76.2 deduped

webpack版本都一样了。

补充 fa-toolkit 是什么

fa-toolkit 一般会集成一系列 webpack 插件和工具,用来完成快应用的构建流程,例如:

功能模块 说明
🔧 webpack 配置生成 自动生成适配快应用项目结构的 webpack 配置(入口、输出、loader等)
📦 打包优化 压缩、去注释、资源合并、生成 .rpk.hap
📜 资源编译 编译 .ux / .qxml / .css / .js 等文件为快应用识别格式
🧩 组件打包 当你写一个"快应用组件库"(比如广告组件)时,它帮助你打包成 npm 模块或独立组件
🧠 开发时热更新 监听源码变动并自动构建(类似 webpack-dev-server 的行为)
相关推荐
敲敲敲敲暴你脑袋5 小时前
地图瓦片批量改色来啦!
node.js·gis·数据可视化
太子釢1 天前
AI 开发个人记账 App(服务端篇)
node.js·ai编程
用户64340495148511 天前
Elpis 项目构建工具与前端基建实践总结
node.js
FungLeo1 天前
成为全栈·Node 后端篇·后端测试策略:单元、集成与测试数据库
单元测试·node.js·集成测试·测试策略·成为全栈·测试数据库
FungLeo1 天前
成为全栈·Node 后端篇·评论内容安全:敏感词过滤、三态审核与级联删除
node.js·敏感词过滤·成为全栈·评论内容安全·评论审核·级联删除
FungLeo2 天前
成为全栈·Node 后端篇·阅读量防刷:去重、冷却与计数写分离
node.js·读写分离·数据去重·接口防刷·成为全栈·数据冷却
脉动数据行情12 天前
Node.js WebSocket 实现贵金属实时行情监听 伦敦金 / 伦敦银自动重连方案
websocket·node.js·vim
不老刘2 天前
一行命令解决 Node.js 版本兼容问题:`--openssl-legacy-provider` 深度解析
node.js
万敏3 天前
Vue3 全栈实战:第一阶段复盘(第1-8周)
vue.js·node.js·全栈
海天鹰3 天前
在线GPX编辑器gpx.studio
js