[Bug] 升级到 umi@3.5.13, chainWebpack 添加 workbox 相关配置以启用 PWA 和 Service Worker 时，运行报错

sherry007 commented 3 years ago

What happens?

umi 升级到 3.5.13, chainWebpack 添加 workbox 相关配置以启用 PWA 和 Service Worker 时，运行会报错

Mini Showcase Repository(REQUIRED)

Please provide a repository using yarn create @umijs/umi-app then upload to your GitHub 请提供一个可复现的仓库，使用 yarn create @umijs/umi-app 创建，并上传到你的 GitHub 仓库

最小复现代码：https://github.com/sherry007/umi-app yarn 然后 yarn start 就会出现报错

How To Reproduce

按照这篇文章对 pwa 相关进行配置： How to use PWA on umi 3.0

.umirc.js最新配置如下：

// .umirc.js
const { InjectManifest } = require('workbox-webpack-plugin');
export default {
base: '/console/',
publicPath: '/console/',
hash: true,
antd: {},
dva: {
hmr: true,
immer: true,
disableModelsReExport: true,
},
+   mfsu: {},
+   webpack5: {},
+   dynamicImport: {},
...
copy: [`/pwa/${manifestName}`],  // 这个需要提供 pwa 需要的 .webmanifest 文件，然后手动将其拷贝到构建之后的目录（dist）下
links: [{ rel: 'manifest', href: `/console/${manifestName}` }], // 手动插入 .webmanifest 文件的 link
chainWebpack(memo) {
// workbox 配置
memo.plugin('workbox').use(InjectManifest, [
  {
    swSrc: './pwa/service-worker.js',
    swDest: 'sw.js',
    exclude: [/\.map$/, /favicon\.ico$/, /^manifest.*\.js?$/],
  },
]);
},
...
}

删除 node_modules, yarn.lock 并运行 yarn cache clean 之后 yarn
yarn start 运行项目并打开页面，报错如下：

Context

Umi Version: 3.5.13
Node Version: v12.16.1
Platform: mac os

xiefengnian commented 3 years ago

初步断定是 workbox-webpack-plugin 这个插件和 import-to-await-require 冲突

sherry007 commented 3 years ago

初步断定是 workbox-webpack-plugin 这个插件和 import-to-await-require 冲突

嗯嗯，感觉就是这个插件的引入有问题，加油！

sherry007 commented 3 years ago

@xiaohuoni 请问这个是已经解决了吗？为啥 close 呢

chen1415 commented 2 years ago

还没解决... 我也卡在这里了有好心人帮一下么 T_T

Luxiaoshi commented 2 years ago

试了一下，在配置里，不能自己引入plugin，否则开启mfsu会有冲突，把配置里的plugin注释了就可以了

umijs / umi