[Bug] umi4 chainWebpack配置GenerateSW插件报错。

[nextdooroldwang]

What happens?

.umirc 中配置chainWebpack ，使用GenerateSW插件报错
`> umi dev

fatal - Error: Parse config file failed: [/Desktop/web/.umirc.ts]
at Function.getUserConfig (/web/node_modules/.pnpm/@umijs+core@4.0.42/node_modules/@umijs/core/dist/config/config.js:146:17)
at Config.getUserConfig (/web/node_modules/.pnpm/@umijs+core@4.0.42/node_modules/@umijs/core/dist/config/config.js:51:19)
at Service.run (/web/node_modules/.pnpm/@umijs+core@4.0.42/node_modules/@umijs/core/dist/service/service.js:196:37)
at Service.run2 (/web/node_modules/.pnpm/umi@4.0.42_txwhl6cq6r42objd7ljblpegca/node_modules/umi/dist/service/service.js:58:23)
at /web/node_modules/.pnpm/umi@4.0.42_txwhl6cq6r42objd7ljblpegca/node_modules/umi/dist/cli/forkedDev.js:24:19
at Object. (/web/node_modules/.pnpm/umi@4.0.42_txwhl6cq6r42objd7ljblpegca/node_modules/umi/dist/cli/forkedDev.js:37:3)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
fatal - A complete log of this run can be found in:
fatal - /web/node_modules/.cache/logger/umi.log
fatal - Consider reporting a GitHub issue on https://github.com/umijs/umi/issues`

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

[https://github.com/nextdooroldwang/umi-web]

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

pnpm start

Context

• Umi Version:^4.0.42
• Node Version:16.13.1
• Platform:chrome

[fz6m]

这个包需要 webpack 这个依赖，但是在 pnpm 的严格隔离结构里，他是找不到 webpack 的，因为 webpack 在 umi 里。

所以可能的解法是：

1. 手动装一个 webpack ，但考虑到这个 webpack 和 umi 的 webpack 有可能不是一个版本，可能会出现多实例问题。

2. 在 chainWebpack(config, { webpack }) 能拿到 umi 的 webpack 实例，然后给 workbox-webpack-plugin 提个 PR 实现外置 webpack impl 实例的传入（社区里一般都会提供一个这种口子）。但是 workbox-webpack-plugin 作者离职已经不维护了（ [Question] Maintain status [Answer] Yes! GoogleChrome/workbox#3149 ）

3. 不用 pnpm 。

考虑到不再维护了，这个插件应该已经寄了，不推荐继续使用。

[nextdooroldwang]

这个包需要 webpack 这个依赖，但是在 pnpm 的严格隔离结构里，他是找不到 webpack 的，因为 webpack 在 umi 里。

所以可能的解法是：

1. 手动装一个 webpack ，但考虑到这个 webpack 和 umi 的 webpack 有可能不是一个版本，可能会出现多实例问题。
2. 在 chainWebpack(config, { webpack }) 能拿到 umi 的 webpack 实例，然后给 workbox-webpack-plugin 提个 PR 实现外置 webpack impl 实例的传入（社区里一般都会提供一个这种口子）。但是 workbox-webpack-plugin 作者离职已经不维护了（ [Question] Maintain status GoogleChrome/workbox#3149 ）
3. 不用 pnpm 。

考虑到不再维护了，这个插件应该已经寄了，不推荐继续使用。

感谢大佬！使用pnpm，实现PWA有其他的插件推荐或者最优的解法吗？

[nextdooroldwang]

pnpm -> yarn 也还是报这个错

https://github.com/nextdooroldwang/umi-web

@fz6m

[xierenyuan]

pnpm -> yarn 也还是报这个错

https://github.com/nextdooroldwang/umi-web

有做 requireHook 映射 可以改成 下面这样试试

export default defineConfig({
  npmClient: "yarn",
  mfsu: false,
  chainWebpack(memo) {
+   const {GenerateSW} = require('workbox-webpack-plugin')
+    memo.plugin("workbox").use(GenerateSW, [
+        {}
+   ])
  }
})