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

nextdooroldwang commented 1 year ago

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 commented 1 year ago

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

所以可能的解法是：

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

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

nextdooroldwang commented 1 year ago

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

所以可能的解法是：

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

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

不用 pnpm 。

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

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

nextdooroldwang commented 1 year ago

pnpm -> yarn 也还是报这个错

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

@fz6m

xierenyuan commented 1 year ago

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, [
+        {}
+   ])
  }
})

umijs / umi