快应用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 的行为) |