升级Next.js到最新版后sw-precache-webpack-plugin报错如何解决？

Next.js 11默认将Webpack版本升级到了Webpack 5，而sw-precache-webpack-plugin已经停止维护多年，其内部调用的outputFileSystem.mkdirp方法在Webpack 5的outputFileSystem中已被移除，替换为原生支持递归创建目录的fs.mkdir方法，这才是触发报错的核心原因，和Node.js版本无关。

方案1：补丁修复sw-precache-webpack-plugin源码（最快适配，无需改业务逻辑） #

用patch-package直接修改依赖包里的错误代码：

1. 先安装patch-package：npm i patch-package --save-dev
2. 打开报错的文件node_modules/sw-precache-webpack-plugin/lib/index.js，找到241行左右的outputFileSystem.mkdirp调用，替换为以下代码：

outputFileSystem.mkdir(path, { recursive: true }, (err) => {
  // 原有回调逻辑保持不变即可
});

3. 运行npx patch-package sw-precache-webpack-plugin生成补丁文件，后续安装依赖会自动应用补丁。

方案2：降级Next.js的Webpack版本到Webpack 4 #

如果不想改依赖代码，可以在next.config.js中强制指定使用Webpack 4编译，Next.js 11仍保留了对Webpack 4的兼容支持：
在next.config.js中添加配置：

module.exports = {
  webpack5: false,
  // 其余原有配置保持不变
}

方案3：替换为维护中的替代插件 #

长期来看建议替换废弃的sw-precache-webpack-plugin，可以改用next-pwa插件或者workbox-webpack-plugin，功能完全覆盖sw-precache-webpack-plugin的能力，适配Webpack 5和高版本Next.js。

内容的提问来源于stack exchange，提问作者marzzy