使用next-pwa编译Next.js应用时出现构建错误求助

问题原因 #

你遇到的报错是因为next-pwa@5.4.4与Next.js@12.2.2存在版本兼容问题，插件错误地将Next.js的顶层配置项（如reactStrictMode）传递给了workbox的GenerateSW插件，而该插件并不接受这个参数。

解决步骤 #

1. 升级next-pwa到兼容版本
   执行以下命令升级到最新兼容版：

npm install next-pwa@latest

或者指定明确的兼容版本（比如5.6.0，该版本已修复Next.js 12.2+的兼容问题）：

npm install next-pwa@5.6.0

2. 重新运行dev服务
   升级完成后，直接执行：

npm run dev

你的现有next.config.js配置无需修改，因为它的结构是正确的——Next.js配置项放在顶层，PWA专属配置放在pwa字段内。

验证说明 #

如果升级后仍有问题，检查pwa字段内是否误添加了不属于workbox GenerateSW的配置项，但从你提供的代码来看，pwa配置是合规的，升级版本即可解决问题。

内容的提问来源于stack exchange，提问作者CSS-Romeo