Next.js 无法转换为 PWA

Question

请帮助我！ PWA 怎么做！！

我做了 npm run build。但失败了。

> [email protected] build
> next build

 ⚠ Invalid next.config.mjs options detected: 
 ⚠     Unrecognized key(s) in object: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21'
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
  ▲ Next.js 14.2.3

   Creating an optimized production build ...
> [PWA] Compile server
> [PWA] Compile server
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /Users/tsubasa/Documents/development/hackathon/wara-front/node_modules/next-pwa/register.js
> [PWA] Service worker: /Users/tsubasa/Documents/development/hackathon/wara-front/.next/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
Failed to compile.

Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'reactStrictMode' property is not expected to be here. Did you mean property 'exclude'?


> Build failed because of webpack errors

无法更改 next.config.mjs。

Answer 1

如果 next.config.js 扩展名是“.mjs”，请尝试重命名它。

/next.config.js
/** @type {import('next').NextConfig} */
const prod = process.env.NODE_ENV === "production";
const withPWA = require("next-pwa")({
  dest: "public",
  disable: prod ? false : true,
});
module.exports = withPWA({
  images: {
    remotePatterns: [ 
      { hostname: `${process.env.NEXT_PUBLIC_CANONICAL}` },
    ],
  },
  async rewrites() {
    return [
      {
        source: "....",
        destination: "....",
      },
    ];
  },
});

另外，检查 next-pwa 软件包的版本。我的是：

"next-pwa": "^5.6.0",